Div css background-image not showing 100% height

css background height cover
Abel Abad picture Abel Abad · Jan 16, 2015 · Viewed 10.3k times · Source

I don't know why this css is working when I use a backgroung-image on the body tag set to 100% height but it is not showing full height (only showing screen height) when I use it on a div

Here is the code:

<body>
   <div id="bg">
   </div>
</body>

CSS

body{
position:relative;
padding: 0;
overflow-x: hidden;
font-family: "Titillium Web";
color:#fff;
width: 100%;
}

#bg{
height:100%;
background-color: #030000;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}

I don't want to use background-size:cover please

Answer

Lu&#237;s P. A. picture Luís P. A. · Jan 16, 2015

Set body and html height: 100%

body,html{
    height: 100%;
     margin:0;
}

body{
position:relative;
padding: 0;
font-family: "Titillium Web";
color:#fff;
width: 100%;
}

#bg{
height:100%;
background-color: #030000;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}

DEMO HERE

IF you want on the full body do this:

body,html{
    height: 100%;
    margin:0;
}

body{
    position:relative;
    padding: 0;
    font-family: "Titillium Web";
    color:#fff;
    width: 100%;
    background-color: #030000;
    background-image: url(http://www.abelabad.com/abad/img/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-attachment: fixed
}

#bg{
    height:100%;
}

DEMO HERE

Related questions

How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More
Cross-Browser CSS solution for fixed, stretched to height background image

Possible Duplicate: Stretch and Scale CSS Background I am looking for a way to have a background with the following properties: - be fixed - stretch proportionally to window height - cross-browser or at least solutions for all browsers.. (IE …

Read More
Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More