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

One of the first things you will discover when you start working with responsive designs and flexible-width layouts is that you need images that can adjust to the screen size as well. 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, doing the same with background images has long provided a significant challenge to many web designers and front end developers.

 Thankfully, the addition of the "background-size" property has made this possible.

A while ago, I showed you 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 larger or small that window gets. The image is scaled to cover the entire screen, but the original proportions and aspect ratio are kept. 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, 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.

As you can see in this series of images, this results in a page that looks a lot better even if the screen is very small or very large.

  • in a large browser window
  • in a small browser window
  • in a large browser window
  • in a small browser window

 

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.

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.

Edited by Jeremy Girard 2/3/17