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?
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/
I would recommend background-size: cover;
if you don't want your background to lose its proportions: JS Fiddle
html {
background: url(image/path) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source: http://css-tricks.com/perfect-full-page-background-image/
html, body {
min-height: 100%;
}
Will do the trick.
By default, even html and body are only as big as the content they hold, but never more than the width/height of the windows. This can often lead to quite strange results.
You might also want to read http://css-tricks.com/perfect-full-page-background-image/
There are some great ways do achieve a very good and scalable full background image.