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+.