The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it:
- Fills entire page with image, no white space
- Scales image as needed
- Retains image proportions (aspect ratio)
- Image is centered on page
- Does not cause scrollbars
- As cross-browser compatible as possible
- Isn’t some fancy shenanigans like Flash
html {
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;
}
