CSS Stretched Background Image

Question

I have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.

background: black url("/image/background.jpg") no-repeat fixed center;

Answer 1

background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.

For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.

Answer 2

here is a good writeup

http://css-tricks.com/perfect-full-page-background-image/

the gist of it being

body { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}