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. If it is needed to resize it, there can be used absolute measurements to have a new size, for instance, px, em, cm, etc.

Measurements of the length can be carried out by using the background-size property with an absolute measurement.

While resizing an image, the aspect ratio (the viewable area and display shape) must be maintained. Otherwise, the image might get distorted and lose some quality of the image.

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>

Result

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 background-size 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>
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 background-size 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 relation between the width and height of the image).

The "contain" value specifies that the background image should be scaled regardless of the size of the container so that each side will be as large as possible without exceeding the length of the container's corresponding side.

In other words, the image will increase or decrease proportionally, but the dimensions of the container will not exceed the width and height.

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>

Covering the Background

When the background-size 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>

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>