CSS Background Size

background-size decides how large a background image renders relative to its element, from an exact pixel size to smart keywords that scale the image to fit or fill automatically.

In this page:

Explicit Dimensions
The cover Keyword
The contain Keyword
Percentage Sizing
Choosing Between cover, contain, and Explicit Sizes

Explicit Dimensions

background-size accepts one or two length/percentage values -- one value sets both width and height equally (scaled proportionally, height auto), two values set width and height independently, which can distort the image's aspect ratio if they don't match its natural proportions.

Example: Explicit Dimensions

css

<style>
.box {
  background-image: url('https://placehold.co/100x100');
  background-size: 60px 40px;
  height: 100px;
}
</style>
<div class="box">Width and height set independently</div>

The cover Keyword

background-size: cover scales the image up or down, preserving its aspect ratio, until it's just large enough to completely fill the element -- some of the image may be cropped off if the element's aspect ratio differs from the image's, but there will never be empty gaps.

Example: The cover Keyword

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  background-size: cover;
  height: 150px;
}
</style>
<div class="box">Fills completely, may crop</div>

The contain Keyword

background-size: contain scales the image, preserving aspect ratio, until it's as large as possible while still fitting entirely within the element -- the whole image is always visible, but this can leave empty gaps (filled by background-color) if the aspect ratios don't match.

Example: The contain Keyword

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  background-size: contain;
  background-repeat: no-repeat;
  height: 150px;
  background-color: #eee;
}
</style>
<div class="box">Whole image visible, gaps possible</div>

Percentage Sizing

Percentage values size the background relative to the element's own padding box dimensions, not the image's natural size -- background-size: 50% 50% makes the image occupy a quarter of the element's area (half the width, half the height).

Example: Percentage Sizing

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  background-size: 50% 50%;
  height: 150px;
}
</style>
<div class="box">Occupies a quarter of the element's area</div>

Choosing Between cover, contain, and Explicit Sizes

cover suits hero photos and full-bleed backgrounds where cropping is acceptable; contain suits logos or product images where nothing should ever be cropped; explicit pixel sizes suit fixed-size icons or patterns where predictable dimensions matter more than responsiveness.

Example: Choosing Between cover, contain, and Explicit Sizes

css

<style>
.hero {
  background-size: cover;
  background-image: url('https://placehold.co/300x100');
  height: 100px;
}
.logo {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('https://placehold.co/300x100');
  height: 100px;
}
</style>
<div class="hero">Hero: cover</div>
<div class="logo">Logo: contain</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Multiple Backgrounds Next Lesson → CSS Background Origin