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

Question

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?

Answer 1

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/