How to Add Responsive Background Images to a Website

Here's how to add responsive design images using CSS

Resizing a background image to cover in a large window
Resizing a background image to cover in a large window. Screen shot by J Kyrnin - image © 2012 J Kyrnin

Look at popular websites today and one design treatment that you are sure to see is large, screen-spanning background images. One of the challenges with adding these images comes from the best practice that websites must respond to different screen sizes and devices - an approach known as responsive web design.

Since your website's layout changes and scales with different screen sizes, so too must these background images scale their size accordingly.

In fact, these "fluid images" are one of the key pieces of responsive websites (along with a fluid grid and media queries). Those three pieces have been a staple of responsive web design since the beginning, but while it has always been fairly easy to add responsive inline images to a site (inline images are the graphics that are coded as part of the HTML markup), doing the same with background images (which are styled into the page using CSS background properties) has long provided a significant challenge to many web designers and front end developers.  Thankfully, the addition of the "background-size" property in CSS has made this possible.

In a separate article, I covered how to use the CSS3 property background-size to stretch images to fit in a window, but there is an even better, more useful way to deploy for this property. To do this, we will use the following property and value combination:

background-size: cover;

The cover keyword property tells the browser to scale the image to fit the window, regardless of how large or small that window gets. The image is scaled to cover the entire screen, but the original proportions and aspect ratio are kept intact, preventing the image itself from being distorted.

The image is placed in the window as large as possible so that the entire window surface is covered. This means that you will not have any blank spots in your page or any distortion on the image, but it also means that some of the image may be trimmed off depending on the aspect ratio of the screen and the image in question. For example, the edges of an image (either top, bottom, left, or right) may be cut off on the images, depending on which values you use for the background-position property.  If you orient the background to "top left", any excess on the image will come off the bottom and right sides.  If you center the background image, the excess will come off of all the sides, but since that excess is spread out, the impact on any one side will be less serve.

How to Use background-size: cover;

When creating your background image, it’s a good idea to create an image that is fairly large. While browsers can make an image smaller without a noticeable impact on visual quality, when a browser scales up an image to a size larger than it's original dimensions, the visual quality will be degraded, becoming blurry and pixelated. The downside to this is that your page takes a performance hit when you are delivering giant images to all screens.

When you do this, make sure to properly prepare those images for download speed and web delivery. In the end, you need to find the happy medium between a large enough image size and quality and a reasonable file size for download speeds.

One of the common ways to use scaling background images is when you want that image to take up the full background of a page, whether that page is wide and being viewed on a desktop computer or much smaller and is being sent to a handheld, mobile devices. 

Upload your image to your web host and add it to your CSS as a background image:

background-image: url(fireworks-over-wdw.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Add the browser prefixed CSS first:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

Then add the CSS property:

background-size: cover;

Using Different Images That Suit Varying Devices

While responsive design for a desktop or a laptop experience is important, the variety of devices that can access the Web has grown significantly, and a greater variety of screen sizes comes with that.

As previously mentioned, loading a very large responsive background image on a smartphone, for example, is not an efficient or bandwidth-conscious design.

Learn how you can use media queries to serve images that will be appropriate to the devices they will be displayed on, and further improve your website's compatibility with mobile devices.

Original article by Jennfier Krynin. Edited by Jeremy Girard 9/12/17