**EDIT: I have already been able to center the div with text and image but I want the background of the div to be full width.
I can't make the logo and full width div with background and text align to center of body(responsive)
**EDIT 2: This is what I am trying to achieve:
enter image description here
I have tried placing the div inside the logo's div since it is already in center
Snippet:
body {
background-image: url('https://source.unsplash.com/random');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
div.container {
position: absolute;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
#text-container {
background-color: rgba(0, 0, 0, 0.6);
}
#title-text {
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.sub-text {
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: 'Open Sans Condensed', sans-serif;
}
<body>
<div class="container">
<img class="logo" src="http://placehold.it/300x200?text=Logo" />
</div>
<div id="text-container">
<p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
<span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
<span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
</p>
</div>
</body>
I want both logo and div with text on the center of body. Placing div under logo.
You can use flexbox property instead of positioning absolute,relative.
in body flex is used to position the img and text containers horizontally.
body {
display: flex; // so that it's content can be centered;
height: 100vh; // To make it fit the whole screen
}
then I've added center div which contained the containers:
.center {
margin: auto;
width: 100%; // to be full width
}
body {
background-image: url("https://cdn.pixabay.com/photo/2016/06/17/06/04/background-1462755_960_720.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
display: flex;
height: 100vh;
}
.center {
margin: auto;
width: 100%;
}
.container {
display: flex;
}
img.logo {
position: relative;
max-width: 128px;
max-height: 128px;
margin: auto;
}
#text-container {
background-color: rgba(0, 0, 0, 0.6);
}
#title-text {
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
}
.sub-text {
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: "Open Sans Condensed", sans-serif;
}
<div class="center">
<div class="container">
<img class="logo" src="http://ejad.solutions/cloud/elogo.jpg" />
</div>
<div id="text-container">
<p id="title-text">
CONSTRUCTION IN PROGRESS <br /><br />
<span class="sub-text"
>WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br
/></span>
<span class="sub-text"
>PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span
>
</p>
</div>
</div>
added .flex container for center the .full-containerwhich contain your logo and text
your flex container should have full screen width and height. here i used width:100vw and height:100vh
*{
margin:0;
padding:0;
}
body {
background-image: url('images/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
.flex{
width:100vw;
height:100vh;
display:flex;
align-items:center;
}
.full-container{
width:100%;
}
img.logo {
position:relative;
display:block;
margin: 0 auto;
margin-bottom:20px;
max-width:100%;
max-height:100%;
}
#text-container{
background-color: rgba(0, 0, 0, 0.6);
}
#title-text{
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.sub-text{
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: 'Open Sans Condensed', sans-serif;
}
<body>
<div class="flex">
<div class="full-container">
<img class="logo" src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" width="150"/>
<div id="text-container">
<p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
<span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
<span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
</p>
</div>
</div>
</div>
</body>
I recommend use transform: translateY(-50%); in container in this case because I think is not a good idea display flex all the body.
You must include img and text-container in the same layer to work together.
Tip: You may not use id for css attributes in HTML
Here you have the result
body, html {
height: 100%;
}
body {
background-image: url('http://lorempixel.com/1600/400/abstract/');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
.container {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}
#text-container {
width:100%;
background: red;
}
#text-container p{
text-align: center;
padding-top:40px;
padding-bottom:40px;
}
.logo {
max-width: 200px;
}
#text-container{
background-color: rgba(0, 0, 0, 0.6);
}
#title-text{
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.sub-text{
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: 'Open Sans Condensed', sans-serif;
}
<body>
<div class="container">
<img class="logo" src="http://ejad.solutions/cloud/elogo.jpg" />
<div id="text-container">
<p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
<span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
<span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
</p>
</div>
</div>
</body>
CSS:
<style type="text/css">
body{
background-image: url(https://cdn1.vectorstock.com/i/1000x1000/88/30/gray-checkers-background-empty-transparent-vector-14458830.jpg);
}
.ddd{
margin: auto;
width: 50%;
height: 50%;
border: 3px solid #2f2018;
padding: 10px;
background-color: #2f2018;
text-align: center;
color: #ffffff;
}
.ddd1{
margin: auto;
margin-top: 20px;
width: 100%;
border: 3px solid #695547;
padding: 10px;
background-color: #695547;
text-align: center;
color: #ffffff;
}
.asd1{
padding-top: 50px;
}
</style>
HTML:
<div class="asd1">
<div class="ddd">
<h1>LOGO HERE</h1>
</div>
<div class="ddd1">
<h1 style="color: #ed8e32;">CONSTRUCTUION IN PROGRESS</h1>
<h3>WE ARE CURRENTLYBUILDING EXCITING PROJECTS FPR YOU,<br>PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE</h3>
</div>
</div>
Related
First, I'm so sorry because I know that it's possible, but I really suck at CSS.
This is what I'd like to do:
I've managed to do it but it's really messy... The main issue is that my header isn't responsive at all and I'd to know what is the best way to do it (I know that usually flexbox is a good practice when it comes to build something responsive but my issue is that if I create 2 columns thanks to Flexbox I won't be able to align them just next to each other).
This is my current code (I know it's uggly):
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%; /* Full width */
z-index: 1;
max-height: 8vh;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
}
.logo {
position: absolute;
top: 10px;
right: 35%;
height: 2.5em;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
<header id="myHeader" class="sticky">
<div class="header-title">
<h1>
Title
</h1>
<img
src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517"
class="logo"
alt="logo plane"
/>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
</header>
Thank you guys!
In HTML with CSS it is sometimes a good idea to do some nesting of elements.
I used an wrapper element (.header-title-composition) to layout title, line, and subtitle vertically . This is all wrapped alongside the paper plane inside .header-title, which is responsible for the horizontal layout
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
/* This destroys everything inside this demonstration */
/* Basing a height on the actual viewport's height is somewhat dangerous */
/* max-height: 8vh; */
}
.header-title {
display: flex;
align-items: center;
}
.header-title :first-child {
margin-left: auto;
}
.header-title :last-child {
margin-right: auto;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
}
.logo {
/* position: absolute;
top: 10px;
right: 35%;*/
height: 2.5em;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
<header id="myHeader" class="sticky">
<div class="header-title">
<div class="header-title-composition">
<h1>
Title
</h1>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
Here somewhat of a starting point for you. First of all, I added .header-brand as wrapper for title, line, sentence and image. Used display: flex for alignment. The additional media query takes care of the alignment, when the screen size is below 480px (But try it out on your own, since there are probably still some issues with that)
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
max-height: 80vh;
display: flex;
}
.header-brand {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
margin: 0;
}
.logo {
height: 2.5em;
margin-left: 20px;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-title {
margin-top: 10px;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
#media screen and (max-width: 480px) {
.line {
width: 100%;
}
.logo {
margin-left: 0;
}
}
<header id="myHeader" class="sticky">
<div class="header-brand">
<div class="header-title">
<h1>
Title
</h1>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
Combine flexbox and a simple wrapper using text-align: center, the decorated line can be a pseudo-element.
h1,
div,
p {
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #c16200;
color: white;
overflow: hidden;
position: sticky;
padding: 0.5rem;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.logo-wrapper {
text-align: center;
margin-right: 1rem;
}
header img {
width: 2rem;
height: 2rem;
}
h1 {
font-weight: bold;
font-size: 1.5rem;
}
h1::after {
width: 10rem;
height: 1px;
display: block;
background-color: white;
content: '';
}
<header class="sticky">
<div class="logo-wrapper">
<h1>TITLE</h1>
<p>the tag line</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</header>
I suppose you want the element which contains the title and subtitle centered, and the image aligned right to that, not both together centered. So here's a solution:
The .title-container is centered within the header using display: flex and other flex settings (see below) on the header. Avoiding both the text container and the image to be centered together is done by applying position: absolute to the image, making it a child of .title-container and applying position: relative to .title-container to make it the position reference for the absolutely positioned image. That way the image isn't considered at all when centering the .title-container.
Take a look at the position parameters for the image: Vertically-centered alignement is achieved by top: 50% and transform: translateY(-50%);, the horizontal position is done with a negative right value: -2.5rem, i.e. the width of the image (2rem) plus 0.5rem for the distance to the text container. Adjust all values as needed.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #c16200;
color: white;
position: fixed;
padding: 1rem;
top: 0;
width: 100%;
font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.title-container {
text-align: center;
position: relative;
width: 200px;
}
.title-container .line {
border-top: 1px solid white;
width: 100%;
margin: 2px 0 4px;
}
.title-container img {
width: 2rem;
height: 2rem;
position: absolute;
right: -2.5rem;
top: 50%;
transform: translateY(-50%);
}
.title-container h1 {
font-size: 1.5rem;
margin: 0;
}
.title-container p {
margin: 0;
}
<header>
<div class="title-container">
<h1>TITLE</h1>
<div class="line"></div>
<p>SUBTITLE</p>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
I've set a blue background image, added some content and was done. I've tried zooming in the site, and whenever I zoom in, the background image automatically pushes itself up and does not cover the founders and half of the yellow arrow.
How it looks normally
How it looks when I zoom in
Any idea on how to fix this?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.post-header {
background-color: #20cfcf;
background-image: url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 60Vh;
text-align: center;
}
.post-header h2 {
text-align: center;
padding-top: 2em;
font-weight: 800;
font-size: 1.7em;
color: #172025
}
.post-header h1 {
font-size: 92pt;
font-weight: 900;
color: white;
margin: 0;
margin-top: em;
}
.founders {
margin-top: -6em;
}
.arrow-box {
position: relative;
background: url("https://i.imgur.com/gp3z7z5.png") no-repeat center center;
background-size: contain;
margin: auto;
width: 400px;
height: auto;
margin-top: -3em;
}
.arrow {
position: relative;
display: flex;
text-decoration: none;
align-items: center;
justify-content: center;
font-size:1.7rem;
height:80px;
color: black;
}
.dev-description {
font-size: 1.4em;
font-weight: 300;
line-height: 1.3em;
}
.recognize {
margin-top: 3em;
text-transform: uppercase;
font-weight: 700;
}
.images {
padding: 1em;
display: inline;
margin-top: 2em;
}
.images:hover,
.images:focus {
color: white;
}
.img-container {
margin-top: 1.3em;
}
<section class="post-header">
<div class="wrapper">
CHYBA TU
<h2>HI. WE'RE TILDE.</h2>
<h1>WE LIVE AND <br> BREATHE CODE.</h1>
<img src="img2/founders.png" class="founders" height="294px" width=425px alt="">
<div class="arrow-box">
Meet the team
</div>
<div class="container">
<p class="dev-description">
We're a small team of developers who are passionate about crafting great software.
We're some of the faces behind Ember.js, Ruby on Rails, jQuery and more. <br>
We're here to help you build the products and tools of the future.
</p>
<p class="recognize">
you may recognize us from around town
</p>
<div class="img-container">
<div class="images">
<img src="img2/rails.png" alt="">
</div>
<div class="images">
<img src="img2/jquery.png" alt="">
</div>
<div class="images">
<img src="img2/ember.png" alt="">
</div>
<div class="images">
<img src="img2/handlebars.png" alt="">
</div>
<div class="images"></div>
<img src="img2/bundler.png" alt="">
</div>
</div>
</div>
</div>
</section>
Thanks in advance. Let me know if something is unclear.
I think you can do like this.
.post-header {
background-color: #20cfcf;
background-image:
url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 582px;
text-align: center;
}
An alternate solution is to adjust the markup of your hero so that the people and arrow images are positioned at the bottom of the background, this means it will work on mobile/desktop and all heights, widths and zoom levels.
In this solution, we create a .hero container and place everything that is meant to be in front of the blue background inside of it. We position the images absolutely, from the bottom, transforming the arrow down 50%.
If you run into issues with the hard-coded height from the other answer then this will work for you.
.hero {
background-color: #20cfcf;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 100px 0 200px;
position: relative;
text-align: center;
}
.preheading {
font-size: 1.7em;
font-weight: 800;
text-transform: uppercase;
}
.heading {
color: #fff;
font-size: 92pt;
font-weight: 900;
text-transform: uppercase;
}
.people {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
img {
border: 1px solid black;
}
<div class="hero">
<div class="preheading">Hi. We're Tilde.</div>
<div class="heading">We live and<br>breate code.</div>
<img class="people" src="https://via.placeholder.com/400x300">
<img class="arrow" src="https://via.placeholder.com/200x80">
</div>
I have a very newbie problem with my page: I cannot center my div-image in the header and I can't vertical-center the content. This is what it looks like:
As you can see, the position I want it to be is POS. I tried margin:auto, using flex and I can't seem to fix it! I also tried with bootstrap, but I'm very confused.
This is the "code":
<body>
<header>
<div class="logo-holder"></div>
</header>
<div class="container align-middle">
<div class="row">
<div class="col">
<img src="{{ object.image.url }}">
</div>
<div class="col">
<div class="container">
<h1>{{ object.title }}</h1>
</div>
</div>
</div>
</div>
</body>
CSS:
body{
font-family: 'Lato', sans-serif;
}
.container img{
border: 1.5px solid rgb(138, 137, 137);
width: 400px;
}
header{
height: 10em;
display: flex;
align-items: center;
justify-content: center;
}
header .logo-holder{
margin:auto;
position: absolute;
background: url(../img/main-logo.png) no-repeat center center;
width: 104px; height: 85px;
position: absolute;
top: 30px;
left: 10%;
}
.container h1{
text-align: center;
text-transform: uppercase;
color: #353738;
letter-spacing: 3px;
font-size: 30px;
font-weight: 600;
}
I know this should be easy for you, but don't to frontend. I tried to investigate, but what it works in a code snipped online won't seem to work in my code somehow. Do you have any idea on how to center the logo and how to vertical-align the product div (the div that contains the image and the title)?
I changed some things in your CSS and it works for me.
I removed the Flex elements in the header
and gave the logo-header a display:block; and margin:auto auto;. Also removed the absolute positioning of the logo-header.
body{
font-family: 'Lato', sans-serif;
}
.container img{
border: 1.5px solid rgb(138, 137, 137);
width: 400px;
}
header{
position:relative;
display:block;
width:100%;
height: 10em;
}
header .logo-holder{
display:block;
margin:auto auto;
background: url('../img/main-logo.png') no-repeat center center;
width: 104px; height: 85px;
}
.container h1{
text-align: center;
text-transform: uppercase;
color: #353738;
letter-spacing: 3px;
font-size: 30px;
font-weight: 600;
}
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 8 years ago.
I am trying to display some text over an image : http://jsfiddle.net/5AUMA/31/
I need to align this text at the bottom part of the image
I tried putting this in css:
.head_img p {
position: absolute;
left: 0;
width: 100%;
vertical-align:bottom;
}
but this doesn't work ...
.............
Secondly I want this to be scalable with the screen width ... if width less than that of a 13" laptop .. remove the image but keep the text
How do i do that
Try this:
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position:relative;
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom:5px;
margin:0;
padding:0;
}
#media (max-width: 1366px) {
.head_img img { display:none; }
}
I added position:relative; to the .head_img class and positioned the p element absolutely with a bottom of 5px.
Then added a media query to hide the image once the screen width goes below 1366px. You will have to adjust that breakpoint, but I believe it's a common screen width for 13" laptops.
Updated fiddle: http://jsfiddle.net/5AUMA/33/
http://jsfiddle.net/5AUMA/32/
your markup wasn't correctly set (moved the paragraph in the same div that contains the image)
<body class ="body">
<div class ="head_img">
<div style="text-align:center;"><img style="min-width:50%; min-height:60%;" src = "http://i.imgur.com/H56PB85.jpg"/>
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
also look for position:relative on the container div to make things work on all browsers
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position: relative; /* HERE */
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
color: white;
}
You need to make couple of changes to your css to make it work as follows.
.head_img p {
position: absolute;
left: 0;
width: 100%;
top: 0;--> Added
color: white;--> Added
}
.head_img{
<--Margin Removed-->
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
}
WORKING FIDDLE
Now to make your image to hide in particular width you can use media queries something like this
#media (max-width: 768px) {
.head_img img{
display:none;
}
}
try this
body {
color: #202020;
font-size: 100%;
font-family: 'Maven Pro', sans-serif;
line-height: 1.4em;
min-height: 100%;
background-color: #fdfdfd;
}
.head_img {
margin-top: 10%;
font-size: 1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align: center;
position: relative;
}
.head_img p {
left: 0;
width: 100%;
position: absolute;
bottom: 5px;
margin: 0;
color: #fff;
}
<body class="body">
<div class="head_img">
<div style="text-align:center;">
<img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
</div>
<p>display this text over the image
<br>and at the bottom part of the image</br>
</p>
</div>
</body>
i have added
top: 394px;
color: #fff;
in .head_img p jsfiddle
body {
background-color: #fdfdfd;
color: #202020;
font-family: "Maven Pro",sans-serif;
font-size: 100%;
line-height: 1.4em;
min-height: 100%;
}
.innerimg {
background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
border: 2px solid;
height: 500px;
width: 500px;
}
.head_img {
color: #000000;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 500px;
}
.head_img p {
display: table-cell;
height: 480px;
text-align: center;
vertical-align: bottom;
width: 500px;
}
<body class ="body">
<div class ="head_img">
<div class="innerimg" style="text-align:center;">
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
add HTML tags
<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>
CSS
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
i have updated the code in this FIDDLe
So I've set up my HTML and I've began to start styling accordingly, however I'm trying to create a fill/covering effect so my image fits between the header and footer and covers the screen however I get this problem. What I want is for it to cover the whole page/screen.
I'm sure it's an easy fix, I just can't figure it out!
http://s28.postimg.org/he9h8lae3/screene.png
Heres my code
HTML
`<body>
<header id="page-header">
<div class="container">
<h1></h1>
<h2></h2>
</div>
</header>
<section class="page-main">
<div class="container">
<div class ="main">
</div>
</div>
</section>
<footer id="page-footer">
<div class="container">
<h4></h4>
<nav>
<ul>
<li>Got Feedback?</li>
</ul>
</nav>
</footer>
</div><!-- #container -->
</body>
</html>
CSS
body {
color: #000;
font-family: 'Rokkitt', serif;
font-size: 1em;
line-height: 1.2;
width: 100%;
height: 100%; }
#container {
max-width: 1280px;
margin: auto; }
main { display: block }
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 2em;
line-height: 1;
font-weight: bold; }
h2 {
font-size: 1.2em;
margin: 20px 0 20px 20px;
text-align: center; }
h3 { }
#page-header {
background-color: #FFB90F;
color: black;
overflow: hidden; }
#page-header h1 {
color: black;
margin: 20px 0 20px 20px;
text-align: center; }
.page-main {
background: url("../images/img_a.png") center center no-repeat;
height: auto;
background-size: cover;
overflow: hidden;
padding: 3%;
box-shadow: inset 0 0 5px rgba(0,0,0,.75); }
#page-footer {
background: #282828;
color: white; }
#page-footer nav { text-align: right; }
#page-footer nav li {
color: white;
display: block; }
#page-footer nav a {
color: white;
display: block;
margin-right: 20px; }
If you want to cover the space you may want to look into the CSS3 background-size.
element{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
CSS
I am assuming the background image is attached to div.container
.container{
background-image: url('Whateveryoururlis');
height: HeightofImage;
width: widthofImage;
}
Height and width are important.