codelessgenie blog

Mastering the CSS `background-size` Property: A Comprehensive Guide

In the world of web design, creating visually appealing and responsive layouts is crucial. One of the key aspects of this is managing background images effectively. The CSS background-size property plays a vital role in controlling how background images are sized within their containing elements. Whether you want to make an image fit perfectly, cover the entire area, or maintain its original dimensions, background-size has got you covered. In this blog post, we'll dive deep into the background-size property, exploring its syntax, values, common use cases, best practices, and providing plenty of examples.

2026-06

Table of Contents#

Syntax#

The basic syntax of the background-size property is as follows:

selector {
  background-size: value;
}

Where selector is the CSS selector for the element whose background you want to style, and value is one of the valid values for the background-size property (which we'll explore in the next section).

Values#

Length Values#

You can specify the width and height of the background image using length values like px (pixels), em, rem, etc. For example:

.box {
  background-image: url('your-image.jpg');
  background-size: 200px 150px; /* Width: 200px, Height: 150px */
}

This will resize the background image to be exactly 200 pixels wide and 150 pixels tall. If you only specify one value (e.g., background-size: 200px;), the second value is assumed to be auto, meaning the height will be calculated proportionally based on the original aspect ratio of the image.

Percentage Values#

Percentage values are relative to the size of the containing element. For instance:

.container {
  width: 500px;
  height: 300px;
}
 
.box-inside {
  background-image: url('your-image.jpg');
  background-size: 80% 60%; /* 80% of the container's width, 60% of its height */
}

Here, the background image will take up 80% of the width and 60% of the height of the .container element.

cover#

The cover value scales the background image as large as possible so that the background area is completely covered by the image. The image will be cropped if necessary to fill the area. This is great for full-screen hero sections or backgrounds where you want the image to always fill the space.

.hero {
  background-image: url('hero-image.jpg');
  background-size: cover;
}

contain#

With the contain value, the background image is scaled down (or up if smaller) so that both its width and height can fit within the background area without cropping. The image will maintain its aspect ratio.

.small-box {
  background-image: url('large-image.jpg');
  background-size: contain;
}

auto#

The auto value is the default. It means the background image will retain its original dimensions. So, if you set background-size: auto;, the image will display at its native width and height.

Common Practices#

Responsive Backgrounds#

Using background-size with percentage values or cover/contain is essential for creating responsive backgrounds. For example, on a website with a fluid layout:

body {
  background-image: url('background.jpg');
  background-size: cover;
}

As the browser window resizes, the background image will always cover the entire viewport (if using cover), providing a seamless visual experience.

Hero Sections#

Hero sections (the large, prominent sections at the top of a website) often use the cover value. Let's say you have a hero section with a fixed height but variable width (depending on the device):

<div class="hero">
  <h1>Welcome to Our Site</h1>
</div>
.hero {
  height: 500px;
  background-image: url('hero-bg.jpg');
  background-size: cover;
  background-position: center; /* Centers the image */
}

This ensures the hero background image always looks great and fills the section, regardless of the screen width.

Best Practices#

Image Optimization#

Before using an image with background-size, make sure it's optimized. Compress the image (using tools like ImageOptim or online services) to reduce its file size without sacrificing too much quality. This helps with page load times, especially when using large background images.

Testing on Different Devices#

Since background-size affects how images display on various screen sizes, test your designs on multiple devices (desktop, tablet, mobile). Use browser developer tools to simulate different screen resolutions and check if the background images look as intended.

Example Usage#

Using Length Values#

<!DOCTYPE html>
<html>
 
<head>
  <style>
    .box {
      width: 300px;
      height: 200px;
      border: 1px solid black;
      background-image: url('https://via.placeholder.com/400x300'); /* Placeholder image */
      background-size: 150px 100px;
    }
  </style>
</head>
 
<body>
  <div class="box"></div>
</body>
 
</html>

Using Percentage Values#

<!DOCTYPE html>
<html>
 
<head>
  <style>
    .container {
      width: 400px;
      height: 300px;
      border: 1px solid black;
    }
 
    .box-inside {
      width: 100%;
      height: 100%;
      background-image: url('https://via.placeholder.com/400x300');
      background-size: 70% 80%;
    }
  </style>
</head>
 
<body>
  <div class="container">
    <div class="box-inside"></div>
  </div>
</body>
 
</html>

Using cover#

<!DOCTYPE html>
<html>
 
<head>
  <style>
    .hero {
      height: 400px;
      background-image: url('https://via.placeholder.com/1200x600');
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
 
<body>
  <div class="hero"></div>
</body>
 
</html>

Using contain#

<!DOCTYPE html>
<html>
 
<head>
  <style>
    .small-box {
      width: 200px;
      height: 150px;
      border: 1px solid black;
      background-image: url('https://via.placeholder.com/400x300');
      background-size: contain;
    }
  </style>
</head>
 
<body>
  <div class="small-box"></div>
</body>
 
</html>

Reference#

By understanding and effectively using the background-size property, you can create more engaging and visually consistent web designs. Experiment with different values and scenarios to achieve the perfect look for your backgrounds.