3 Techniques for Generating Responsive Image Backgrounds

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.

• Resizing Background Images With CSS
• Generating Responsive Image Backgrounds With Media Queries
• Generating Responsive Image Backgrounds With Cloudinary

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

Why Are Responsive Images Important?

• Enhanced User Experience. Responsive images adapt to various screen sizes and devices, ensuring users can view images clearly and legibly, regardless of the device they use.
• Improved Accessibility. These images are beneficial for users with visual impairments as they can be resized to align with the user’s preferred font and screen size, making the content more accessible.
• Boosted SEO. Search engines favor websites optimized for multiple devices and screen sizes. Responsive images are a crucial component of this optimization strategy.
• Faster Page Load Times. Using the srcset and sizes attributes allows different versions of an image to be specified for various screen sizes and devices. This enables the browser to select the most suitable image, enhancing loading times and overall performance.
• Increased User Engagement. Providing a seamless and consistent experience across different devices can lead to higher user engagement and a lower bounce rate.

Responsive images are vital for optimizing websites for various devices and screen sizes. They enhance user experience, improve accessibility, boost SEO, speed up page load times, and increase user engagement, ultimately improving the overall performance of a website.

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.

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:

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

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

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

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