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

Syntax

css

selector {
  background-size: auto | cover | contain | width height;
}

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.

Note:

Accepted values:
auto — natural image size (default)
cover — fills the box, may crop
contain — fits inside, may leave gaps
length — such as 200px or 200px 100px
percentage — relative to the background area
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:

Accepted values:
auto — the image's natural size (initial value)
cover — scales to fill the box, may crop
contain — scales to fit fully inside, may leave gaps
length — e.g. 200px or 10rem
percentage — relative to the background positioning area
two values — width then height, e.g. 50% auto
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:

Accepted values:
auto — the image's natural size (initial value)
cover — scales to fill the box, may crop
contain — scales to fit fully inside, may leave gaps
length — e.g. 200px or 10rem
percentage — relative to the background positioning area
two values — width then height, e.g. 50% auto
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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).

Note:

Accepted values:
auto — the image's natural size (initial value)
cover — scales to fill the box, may crop
contain — scales to fit fully inside, may leave gaps
length — e.g. 200px or 10rem
percentage — relative to the background positioning area
two values — width then height, e.g. 50% auto
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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>

Live Example

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

CSS Background Size

Explicit Dimensions

The cover Keyword

The contain Keyword

Percentage Sizing

Choosing Between cover, contain, and Explicit Sizes

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code