Get a flashy first impression with full page image backgrounds

Last Updated:
Customization Tips

Over the last few years there have been a few solutions, some of them using javascript and some not. In these modern times with modern browsers I suggest you use the CSS3 background-size property feature. This method is cross-browser compatible and doesn’t require any jQuery or flash.

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;

The cover value specifies that the background image should be sized so that it is as small as possible whilst ensuring that both dimensions are greater than or equal to the corresponding size of the container. Scale the background such that both it’s width & height can completely cover the background positioning area.

Unfortunately, Internet Explorer doesn’t recognize the background-size property below version 9. You can also use “contain” to scale the image whilst preserving it’s intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.


Additional info links:

Get a flashy first impression with full page image backgrounds 5.005 (100.00%) 4 votes

This article was first published

Villa Belluci - View our NEW theme

Tutorials & tips delivered regularly

Expand your purchase with regular tutorials and tips to making your site better, direct to your email.