How to Resize Background Images with CSS3

Background images can be used for resizing and scaling. In CSS2.1, background images set to a container kept their fixed dimensions. Luckily, CSS3 represents the background-size property, which allows backgrounds to be stretched or squashed. It is ideal if you use Responsive Web Design techniques to create a template.

Some different methods will be shown below.

Absolute Resizing

When we set a background image, by default, the width and height of the image are set to "auto", which retains the original image size. To resize it, you can use absolute measurements such as px, em, or cm.

You can apply these measurements using the <span class="property">background-size</span> property.

Tip

While resizing an image, the aspect ratio (the proportional relationship between the width and height) must be maintained. Otherwise, the image might get distorted and lose quality.

Let's see an example of a resized background image.

Example of creating an absolutely resized background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Resized Background Image</title>
    <style>
      .resized {
        width: 400px;
        height: 300px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 300px 200px;
        background-repeat: no-repeat;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Resized Background Image</h2>
    <div class="resized"></div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> XFI5 </div> </div> ## Relative Resizing Using Percentages

The use of a percentage value can be useful for responsive designs. When a percentage value is used, the dimension is based on the containing element and not on the size of the image. If the <span class="property">background-size</span> property is set to "100% 100%", the background image will stretch to cover the entire content area.

Example of adding a relatively resized background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Resized Background Image</title>
    <style>
      .resized {
        width: 100%;
        height: 400px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border: 2px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Resized Background Image</h2>
    <div class="resized"></div>
  </body>
</html>

Try it Yourself »

Info

However, the width of the background image depends on the size of its container. And it is not recommended to use percentages when you have a specific width for your container.

Maximum Size Scaling

When the <span class="property">background-size</span> property is set to its "contain" value, the background image will scale and try to fit the content area. The image, however, will maintain its aspect ratio (the proportional relationship between the width and height of the image).

The "contain" value scales the image so that it fits entirely within the container without cropping.

In other words, the image scales proportionally to fit inside the container's dimensions.

Example of resizing the background image with the "contain" value of the background-size property:

<!DOCTYPE html>
<html>
  <head>
    <title>Resized and Responsive Background Image</title>
    <style>
      .resized {
        width: 100%;
        height: 400px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Resized and Responsive Background Image</h2>
    <p>Resize the browser to see the effect:</p>
    <div class="resized"></div>
  </body>
</html>

Try it Yourself »

Covering the Background

When the <span class="property">background-size</span> property is set to its "cover" value, the background image will scale to cover the whole content area. The image is scaled to fit the whole container, but the image will be cropped if it has a different aspect ratio.

The "cover" value specifies the size of the background image to be as small as possible while ensuring that both dimensions are greater than or equal to the container's corresponding size.

Example of resizing the background image with the "cover" value of the background-size property:

<!DOCTYPE html>
<html>
  <head>
    <title>Resized and Responsive Background Image</title>
    <style>
      .resized {
        width: 100%;
        height: 400px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: cover;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Resized and Responsive Background Image</h2>
    <p>Resize the browser to see the effect:</p>
    <div class="resized"></div>
  </body>
</html>

Try it Yourself »

Setting Different Backgrounds for Different Devices

A big photo on a large computer screen could be ideal, but on a small device, it can be worthless. Why load a big picture if you still have to scale it down?

You can use media queries to display different images on different devices to reduce the load.

Here the @media rule is used. In this example, there is one large image and one smaller image that is set to be displayed on different devices. You will see the effect when you resize the browser width, and the background image will change at 500px. To see the effect clearly, toggle device toolbar and have a mobile view.

Example of adding different backgrounds for different devices:

<!DOCTYPE html>
<html>
  <head>
    <title>Resized and Responsive Background Image</title>
    <style>
      /* For width smaller than 500px: */
      body {
        background-repeat: no-repeat;
        background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
      }
      /* For width 500px and larger: */
      @media only screen and (min-width: 500px) {
        body {
          background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg");
        }
      }
      p {
        margin-top: 220px;
      }
    </style>
  </head>
  <body>
    <p>
      Resize the browser width and the background image will change at 500px. To see the effect clearly, toggle device toolbar and have mobile view.
    </p>
  </body>
</html>

Try it Yourself »