The Perfect Full Page Background Image

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…

Read more…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s