Search code examples
htmlcssbackground-image

CSS: stretching background image to 100% width and height of screen?

I have an image called myImage.jpg. This is my CSS:

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

For some reason, when I do this, the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page. So if I put a bunch of 

<br>

in my html page, then the height will increase. If my HTML page consists only of a 

<div id='header'>
    <br>
</div>

then the height of the background image would just be the height of one

<br>

How do I make the height of my background image 100% of the screen which the user is using to view the webpage?

Solution

  • You need to set the height of html to 100%

    body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

    http://jsfiddle.net/8XUjP/