Scaleable Full Screen Background Image with CSS3

Renji

12 years ago

With the background-size property in CSS3, we can get a full page scaleable background image.

Here’s the CSS code:

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

Background image is centered, automatically resized according to browser size, and retains the aspect ratio.

The background-size property is supported in Chrome, IE9+, Firefox 4+, Opera 10+, and Safari 5+. Using vendor prefixes, we can get this to work on Firefox 3.6+, Opera 9.5+ and Safari 3+.

Related tips: