Responsive Images Create Your React Image Gallery: a Quick Tutorial Responsive Images – What They Are And How To Create Them How to Easily Resize an Image with Bootstrap What Are Responsive Images and 6 Useful Techniques How to Handle Responsive Images with HTML5 How to Handle Responsive Images in React Ensure Responsive Image Design for Faster Delivery Generate Responsive Images for Reduced Bandwidth 5 Techniques and Examples for Creating Responsive Images in CSS 4 Techniques for Creating Responsive Images With Bootstrap 3 Techniques for Generating Responsive Image Backgrounds Responsive Images in HTML: A Practical Guide

3 Techniques for Generating Responsive Image Backgrounds

responsive background

What Are Responsive Image Backgrounds?

Background images are frequently part of modern web designs. However, those images make it challenging to ensure that a website correctly responds to the context of various devices, screen sizes, and browsers. A solution is to adopt a strategy called responsive web design (RWD), which adapts to screen size with flexible layouts by, for example, spreading website content across multiple columns on desktop browsers, or by displaying the content in one column on mobile devices.

Responsive design must also extend to responsive images so that the website’s entire look and feel is responsive. That requires adding background images in such a way that only the pixels that are usable and that contribute to user experience are displayed on user devices.

This article describes three easy ways in which to create responsive image backgrounds: two requiring manual input of responsive parameters and one fully automated by the Cloudinary media-management platform.

For more details, see Best Practices for Responsive Web Design.

Resizing Background Images With CSS

With the CSS property background-size, you can resize background images and change the default behavior of tiling them at full size. Even though doing that does not make the background images responsive, you can look for and specify a setting for them that applies to all screen sizes or devices and then automatically apply the most appropriate settings with media queries.

See the examples below, which are from the Mozilla Web Docs.

Tiling Large Images

A way to change the display of background images is to resize them while tiling them in the background with CSS. For example, to tile four copies of a large image into a square of 300×300 pixels, set background-size to 150x to scale the image to that size. Next, define the width and height properties to the size of the container in which to display the image.

“Optimise

HTML

<div class="tiledBackground">
</div>

CSS

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

The image then looks like this:

Leveraging the contain Parameter

The contain value specifies that a background image be scaled in such a way that its height and width are as large as possible without breaching the size of the surrounding container. Setting contain does not override the default behavior of tiling the background image. So, as the container grows, more copies of the original image will be displayed.

HTML

<div class="bgSizeContain">
<p>Try resizing this element!</p>
</div>

CSS

.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

The image then looks like this:

Leveraging the cover Parameter

The cover value specifies that the background image be as small as possible while ensuring that the image’s width and height are the same as that of the container. If those dimensions are greater than that of the container, only part of the image is shown.

HTML

<div class="bgSizeCover">
<p>Try resizing this element!</p>
</div>

CSS

.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

The image then looks like this:

Generating Responsive Image Backgrounds With Media Queries

With media queries, you can declare styles that apply to certain media or device types. To implement media queries, define—with CSS @media rules—breakpoints, which are thresholds that, if exceeded, cause the website to switch to another style.

A common practice is to specify different images for different screen sizes and then do either of the following with media queries:

  • Switch to the most appropriate image for the user’s device.
  • Switch to the style definitions for the same image.

If the conditions defined by a media-query rule are met—for example, if the screen exceeds a certain width—the styles defined by the breakpoint take effect.

Consider this CSS code that displays a background image:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/bg-large.jpg);
}

Instead of adding the background-image property in the stylesheet, add it within a media rule. The example below creates a breakpoint for screens up to 640 pixels in width for displaying the bg-small.jpg image.

@media (max-width: 640px) {
  body {
    background-image: url(images/bg-small.jpg);
  }
}

Here is a media rule that accommodates slightly larger screens:

@media (min-width: 640px) and (max-width: 1280px) {
  body {
    background-image: url(images/bg-medium.jpg);
  }
}

This rule defines the third breakpoint, displaying the largest image for full desktop screens:

@media (min-width: 1281px) {
  body {
    background-image: url(images/background-large.jpg);
  }
}

Generating Responsive Image Backgrounds With Cloudinary

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload images and apply built-in effects, filters, and modifications. You can also create image effects that are difficult or impossible to produce with just CSS.

Cloudinary makes it simple to deliver responsive images by doing the following:

Last updated: Dec 26, 2023