Background-size vs Object-fit in CSS: The Complete Guide with Examples

Short answer:

• background-size controls how a CSS background image fills a box (used with background-image on any element).
• object-fit controls how the content of a replaced element (like , , ) is resized to fill its box.

They often produce the same visual result (e.g. cover), but they behave very differently under the hood — semantics, accessibility, responsive image features, browser behavior, and where you can apply them.

Key differences (quick)

• Applies to

  • background-size → any element with background-image.
  • object-fit → replaced elements (mostly , , , ).

• Semantics & accessibility

  • background-image is decorative (no alt text). Not suitable for meaningful content.
  • + object-fit is content — keeps alt, srcset, loading="lazy".

• Responsive image support

  • supports srcset, sizes, lazy-loading — better for performance & responsive art direction.
  • CSS can use image-set() but it’s less convenient.

• Multiple backgrounds

  • background-image can have multiple layers.
  • object-fit only affects the single replaced element.

• Default sizing behaviors

  • background-size keywords: auto, contain, cover, plus lengths/percentages.
  • object-fit keywords: fill, contain, cover, none, scale-down.

• Browser support

  • background-size is widely supported.
  • object-fit is supported by modern browsers; older IE lacks it (use progressive enhancement or polyfill if you must support IE11).

Step-by-step examples

Example 1 — side-by-side: background-size: cover vs object-fit: cover

HTML:

CSS:

.examples { display:flex; gap:16px; align-items:flex-start; }

.card {
  width: 320px;
  height: 200px;
  border: 1px solid #ddd;
  overflow: hidden; /* important for object-fit demo */
}

/* background version */
.bg-card {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* keys: cover / contain / 100% 100% / auto */
}

/* img version */
.fit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* cover / contain / fill / none / scale-down */
  object-position: center; /* like background-position */
  display: block; /* removes inline-gap below img */
}

What you’ll see: both cards visually crop the image to completely fill the 320×200 box, preserving aspect ratio. But the left is a CSS background (no in DOM), the right is a semantic image element.

---

Example 2 — contain vs cover, and the fill vs 100% 100% nuance

.contain-bg { background-size: contain; background-position:center; background-repeat:no-repeat; }

/* object-fit contain */
.fit-contain { width:100%; height:100%; object-fit: contain; object-position:center; }

• contain will scale the image so the entire image is visible — there will be letterboxing (empty space) if the aspect ratios differ.
• cover fills and crops; contain fits and shows all.

background-size: 100% 100% ≈ object-fit: fill — both stretch the image to exactly the box dimensions (aspect ratio is not preserved).

Example 3 — why object-fit sometimes seems to “not work”

object-fit takes effect only if the replaced element has both width and height defined in CSS (or the parent provides them). If you set img { width:100%; height:auto }, the browser preserves the intrinsic aspect ratio and object-fit is ignored. To use object-fit reliably give the image a constrained box:

.card { width:320px; aspect-ratio: 16/9; } /* modern way to define height */
.fit-img { width:100%; height:100%; object-fit:cover; }

Or set a fixed height on the parent. Using aspect-ratio is a nice modern technique for responsive placeholders.

Accessibility, performance & best-practices

• Use with object-fit when the image is meaningful content (SEO, screen-readers, responsive srcset, loading="lazy").

• Use background-image when the image is purely decorative (no need for alt, or when you need multiple layered backgrounds).

• For responsive art-direction (different crops at different breakpoints), prefer /srcset when possible — easier and more performant.

• If supporting old IE where object-fit isn’t available, either:

  • Provide a CSS fallback (e.g. use background-image on a wrapper), or
  • Use a small polyfill (common libraries are available).

Quick decision guide

• Decorative background, multiple layers, or CSS-only effects → background-image + background-size.
• Real content image that needs alt text, srcset, lazy-load, or semantic markup → + object-fit.
• Want the exact same behavior visually? Either can mimic the other, but prefer the one that matches semantics & performance needs.

If you want, I can:

• produce a tiny demo page (HTML file) you can copy/paste to test locally, or
• convert one of your real images into both patterns so you can compare exactly.

Which would you like? Check demo