DigitalFlare
Call: 0843 289 5840

Our clients often require websites builds 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 simply 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:

  • Fills entire page, leaving no white space
  • Scales the image as needed
  • Retains image proportions (aspect ratio)
  • Is centered on page
  • 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 certain widths/heights the image or the main focus of the image can be positioned off-center 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 simply retain the full 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 certain 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 are able to use media-queries to best present the image for various screen dimensions. There are a variety of other trade-offs which are explained over on CSS-Tricks.com here.