The Perfect Full Page Background Image

Our clients often require websites built with full-screen background images or full-screen image slideshows. Pre-CSS3, we had to use a combination of CSS tricks, JQuery and even Flash, but now CSS3 is widely supported across all browsers/devices. We can use the 'background-size' property.

There are a variety of property values, best explained here, but the 'cover' property is the best option for full-screen images. Setting the 'background-size' property to use the value 'cover' will ensure the image:

• It fills the entire page, leaving no white space
• Scales the image as needed
• Retains image proportions (aspect ratio)
• It is centred on the page
• It does not cause scrollbars to appear

#bg_slider {
    background-size: cover;
}

This works very well in most situations. However, when a client's screen reaches specific widths/heights, the image or the main focus of the image can be positioned off-centre or even off-screen. This is illustrated below on a recent website we developed...

The first window clearly shows the pavement 'in view', but the second window crops the pavement area and some of the roof to ensure the image remains in ratio.

To retain the entire image, we could use the CSS setting 'contain' - however, this would introduce some white space which would not sit well with the rest of the design. However, it is possible to re-position the crop position to ensure the key areas are still visible for specific screen dimensions. The easiest way to do this is to add a background position...

#bg_slider {
    background-position: center top;
    background-size: cover;
}

Although the 'cover' property value can be limiting, we can use media queries to best present the image for various screen dimensions. There are a variety of other trade-offs, which are explained on CSS-Tricks.com here.