Images

Images in CSS

The CSS `background` property is a powerful tool for adding complex images to elements, making it easy to add multiple images, cause them to repeat, and more. When combined with media queries, the background property becomes even more powerful, enabling conditional image loading based on screen resolution, viewport size and more.

In this guide

TL;DR

Use the best image for the characteristics of the display, consider screen size, device resolution and page layout.
Change the background-image property in CSS for high DPI displays using media queries with min-resolution and -webkit-min-device-pixel-ratio .
Use srcset to provide high resolution images in addition to the 1x image in markup.
Consider the performance costs when using JavaScript image replacement techniques or when serving highly compressed high resolution images to lower resolution devices.

Use media queries for conditional image loading or art direction

Media queries not only affect the page layout, but can also be used to conditionally load images or to provide art direction depending on the viewport width.

For example in the sample below, on smaller screens, only small.png is downloaded and applied to the content div , while on larger screens, background-image: url(body.png) is applied to the body and background-image: url(large.png) is applied to the content div .

                              
                                    .example {
      height: 400px;
      background-image: url(small.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position-x: center;
    }

    @media (min-width: 500px) {
      body {
        background-image: url(body.png);
      }
      .example {
        background-image: url(large.png);
      }
    }
    

                               

                              
                               View full sample
                              
                             

Use image-set to provide high res images

The image-set() function in CSS enhances the behavior background property, making it easy to provide multiple image files for different device characteristics. This allows the browser to choose the best image depending on the characteristics of the device, for example using a 2x image on a 2x display, or a 1x image on a 2x device when on a limited bandwidth network.

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

In addition to loading the correct image, the browser will also scale it accordingly. In other words, the browser assumes that 2x images are twice as large as 1x images, and so will scale the 2x image down by a factor of 2, so that the image appears to be the same size on the page.

Support for image-set() is still new and is only supported in Chrome and Safari with the -webkit vendor prefix. Care must also be taken to include a fallback image for when image-set() is not supported, for example:

                              
                                    .sample {
      width: 128px;
      height: 128px;
      background-image: url(icon1x.png);
      background-image: -webkit-image-set(
        url(icon1x.png) 1x,
        url(icon2x.png) 2x
      );
      background-image: image-set(
        url(icon1x.png) 1x,
        url(icon2x.png) 2x
      );
    }
    

                               

                              
                               View full sample
                              
                             

The above will load the appropriate asset in browsers that support image-set, and fall back to the 1x asset otherwise. The obvious caveat is that while image-set() browser support is low, most browsers will get the 1x asset.

Use media queries to provide high res images or art direction

Media queries can create rules based on the device pixel ratio , making it possible to specify different images for 2x vs 1x displays.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

Chrome, Firefox and Opera all support the standard (min-resolution: 2dppx) , while Safari and Android Browser both require the older vendor prefixed syntax without the dppx unit. Remember, these styles are only loaded if the device matches the media query, and you must specify styles for the base case. This also provides the benefit of ensuring something will be rendered if the browser doesn’t support resolution specific media queries.

                              
                                    .sample {
      width: 128px;
      height: 128px;
      background-image: url(icon1x.png);
    }

    @media (min-resolution: 2dppx), /* Standard syntax */
    (-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
    {
      .sample {
        background-size: contain;
        background-image: url(icon2x.png);
      }
    }
    

                               

                              
                               View full sample
                              
                             

You can also use the min-width syntax to display alternative images depending on the viewport size. This technique has the advantage that the image is not downloaded if media query doesn’t match. For example, bg.png is only downloaded and applied to the body if the browser width is 500px or greater:

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}