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:


Mountain

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


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

Break long url or word using css to prevent overflow of div container

First of all I am not design expert, not a designer but I learnt many thing about design I mean css, html while working with website projects. Something gave me pain when I found a long url is getting outside of a box(div) in google chrome. After a google search I found a solution… need to use word break though it doesn’t support all browser.

See how a long url go outside of a div box

I found a solution
[code language=”css”]
.box{
white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;
}
[/code]

thanks