background-size

Controls how background images fill the container. bsc fills entirely (may crop), bsct shows full image (may letterbox). bsc used 90%+ of the time.

Class List

Class	CSS	Description
`bsc`	background-size: cover	Fills container completely (image may be cropped)
`bsct`	background-size: contain	Shows entire image (margins may appear)
`bsa`	background-size: auto	Keeps the image's intrinsic size

Visual Diagram

All three boxes are the same wide element and the blue area shows how much room the background image actually takes. The source is assumed to be a landscape image smaller than the box.

bsa

Intrinsic size. If the source is smaller than the box, empty space is left over.

bsct

Scaled down keeping its ratio until it fits entirely, leaving empty bands above and below.

bsc

Scaled up keeping its ratio until the box is covered. Whatever overflows is cropped.

Usage Examples

Use bsc with bgpc and bgrn for hero banners, card thumbnails, etc.

<!-- Hero banner -->
<div class="bsc bgrn bgpc h40rem">
  <h1>Hero Title</h1>
</div>

<!-- Card thumbnail -->
<div class="bsc bgrn bgpc h20rem br8px"></div>

<!-- When you need to show the full image like a logo -->
<div class="bsct bgrn bgpc h10rem"></div>

Class Details

`bsc`background-size: cover

By far the most used value in practice. It covers the element with no gaps while keeping the ratio, so it drops straight into hero banners, card thumbnails and profile covers. The shorter axis gets cropped, so pair it with a position class to choose the focal point.

<!-- Card cover: fill the frame, keep the face -->
<article class="b1pxsolid27272A br8px oh bg18181B">
  <div class="bsc bgrn bgpt h20rem"></div>
  <div class="p2rem">
    <h3 class="fs2rem fw700 cFAFAFA mb4px">Field report</h3>
    <p class="fs14px c71717A">Cover crops the bottom, never the headline.</p>
  </div>
</article>

`bsct`background-size: contain

The value for images that must be seen whole: logos, diagrams and screenshots where cropping destroys information. When the box ratio differs from the image ratio you get empty bands, so set a background color as well.

<!-- Partner logo slot: never crop, fill the gaps with a color -->
<div class="bsct bgrn bgpc h8rem w20rem bgFFFFFF br8px"></div>

`bsa`background-size: auto

The default. The image keeps its intrinsic pixel size. Use it for icons and pattern tiles that must not be scaled, and as the reset when coming back from another value.

<!-- Pattern tile at its authored size, repeating -->
<div class="bsa bgrr h20rem br8px"></div>

<!-- Single icon at its intrinsic size: remember no-repeat -->
<div class="bsa bgrn bgpc w4rem h4rem"></div>

Practical Example — Hero Banner and Logo Slot

One screen where the photo must fill and the logo must stay whole: cover for the photo, contain for the logo slot, with a background color filling the leftover bands.

<section class="pr h40rem bsc bgrn bgpc df fdc jcfe p3-2rem">
  <!-- Photo fills the hero and is cropped around the center -->
  <h1 class="fs4rem fw800 cFFFFFF lh1-2 mb8px">Built in the open</h1>
  <p class="fs16px cA1A1AA">Cover plus center is the default hero recipe.</p>
</section>

<div class="df fww gap2rem p3-2rem">
  <!-- Logos must stay whole, so contain plus a solid backdrop -->
  <div class="bsct bgrn bgpc w15rem h6rem bgFFFFFF br8px"></div>
  <div class="bsct bgrn bgpc w15rem h6rem bgFFFFFF br8px"></div>
  <div class="bsct bgrn bgpc w15rem h6rem bgFFFFFF br8px"></div>
</div>

Tips / Caveats

Always pair cover with a position

Cover crops the overflowing axis. Without a position it crops around the center, so a portrait needs a top anchor to keep the face in frame.

contain leaves empty bands

Contain leaves space on the remaining axis, and the element's own background color shows through it. Without a chosen background color the page color bleeds in and looks unintentional.

No element height means nothing to see

A background image does not give an element any size. If you put cover on an empty element without a height, the height is zero and the image never appears.

Covering with a huge source is expensive

Cover happily scales up or down, so a full-resolution source in a small card still looks fine on screen. The download and decode cost stays, so ship a thumbnail-sized asset instead.

The result changes when repeat is involved

With the intrinsic-size value, an image smaller than the box gets tiled by the default repeat. If you want a single copy, turn repeat off explicitly.

cover vs contain

bsc fills without gaps but may crop; bsct shows full image but may have empty space.

Essential combination

Standard: use bsc bgrn bgpc as a set for background images.

background-repeat background-position background-attachment background-clip background-origin background