📐 CSS Tutorial: background-size

📌 Introduction

The background-size property in CSS controls how a background image is scaled inside an element. It allows you to stretch, fit, cover, or auto-scale images to create hero sections, cards, banners, and responsive designs. Mastering background-size is essential for modern UI layouts. 🎨✨

🎯 What Does background-size Do?

  • Controls the width and height of background images
  • Defines whether images should stretch or maintain aspect ratio
  • Works with multiple background layers
  • Helps create responsive hero sections, patterns, and textures

✨ Syntax

Syntax

selector {
  background-size: auto | cover | contain | <length> | <percentage> | <length> <length>;
}

Note

If you use two values (e.g., 100px 50px), the first is width, the second is height.

🧩 Available Values

1. auto (default)

Keeps the image at its original size.

auto

background-size: auto;

2. cover

Scales the image so it completely covers the element while maintaining aspect ratio. This is perfect for hero images & full backgrounds.

cover

background-size: cover;

3. contain

Scales the image to make sure the entire image is visible. Some empty space may appear, but the whole image fits.

contain

background-size: contain;

4. Length Values

Length Example

background-size: 200px 150px;

5. Percentage Values

Percentages are relative to the element’s dimensions, not the image size.

Percentage Example

background-size: 100% 50%;

6. Single Value

When only one value is given, it applies to the width. Height becomes auto.

Single Value

background-size: 300px;

7. Multiple Background Layers

Multiple Sizes

background-image: url("pattern.png"), url("texture.jpg");
background-size: 50px 50px, cover;

🧩 Practical Examples

1. Fullscreen Hero Banner

Hero Section

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

2. Showing Full Image Inside a Box

Contain Example

.profile {
  background-image: url("portrait.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

3. Fixed Background Icon

Icon Example

.icon {
  background-image: url("icon.png");
  background-size: 32px 32px;
}

4. Responsive Tile Pattern

Tile Example

.pattern {
  background-image: url("tile.png");
  background-size: 20% auto;
}

5. Layered Background Effects

Layered Background

.layer {
  background-image: 
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("bg.jpg");
  background-size: cover, contain;
}

📊 Comparison: cover vs contain

ValueBehaviorBest For
coverFills entire area, image may cropHero sections, banners
containShows entire image, may leave spaceLogos, product photos

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x260/eeeeee/000000&text=background-size+demo

>>“Scaling backgrounds correctly is the difference between a messy layout and a polished UI.” ✨

🎉 Conclusion

The background-size property gives you full control over how background images scale and fit inside elements. From responsive hero sections to precise image icons, knowing when to use cover,contain, percentages, or fixed sizes lets you create beautiful, flexible designs. Master it → and your backgrounds will always look perfect. 🚀