Full-screen background photos can be a great effect especially in minimalist design. Obviously, when choosing your photo, please pick something that is:
- large enough to fill browsers with high resolutions
- not going to distract users from the actual content of the site
There are a couple different ways to achieve this effect, but since CSS3 is starting to make it’s mark, let’s take a look at this approach.
By adding this little snippet of code to your css:
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;
}
You will have a full-screen background image that scales and crops as the browser is resized.
For compatibility reasons, we can add:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bg.jpg’, sizingMethod=’scale’);
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bg.jpg.jpg’, sizingMethod=’scale’)”;
The effect is now compatible with the following browsers:
Firefox 3.6+
Chrome 8+
IE 7+
Safari 3+
Opera 10+
Chris Coyier of CSS-Tricks offers even more solutions, here.
