Object-fit vs Background-size in CSS: Key Differences and Usage

object-fit controls how an <img> or replaced element fits inside its container, while background-size controls the size of a background image on any element. Use object-fit for inline images and background-size for CSS backgrounds.

Quick Comparison

Here is a quick side-by-side comparison of object-fit and background-size properties.

Feature	object-fit	background-size
Applies to	<img> and replaced elements	CSS background images on any element
Purpose	Control how content fits inside its box	Control size of background image
Common values	contain, cover, fill, none, scale-down	auto, cover, contain, specific sizes (e.g. 100% 50%)
Affects layout	Yes, changes how image fits inside container	No, background image size only, container size unchanged
Used with	<img> tag or replaced elements	CSS background-image property
Supports multiple images	No	Yes

Key Differences

object-fit is a CSS property designed specifically for images or replaced elements like videos or SVGs. It controls how the content fits inside the element's box, preserving aspect ratio or stretching as needed. For example, object-fit: cover makes the image fill the container while cropping overflow, and object-fit: contain fits the entire image inside without cropping.

On the other hand, background-size controls the size of background images applied via CSS. It can scale, stretch, or tile the background image inside the element's background area. Unlike object-fit, it does not affect the element's content or layout but only the background image rendering.

Another key difference is that object-fit works only on replaced elements like <img>, while background-size works on any element with a background image. Also, background-size supports multiple background images with different sizes, which object-fit does not.

Code Comparison

This example shows how to use object-fit to make an image cover its container while maintaining aspect ratio.

html

<style>
  .container {
    width: 300px;
    height: 200px;
    border: 2px solid #333;
    overflow: hidden;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<div class="container">
  <img src="https://via.placeholder.com/400x300" alt="Example Image">
</div>

Output

A 300x200 pixel box with a placeholder image filling it completely, cropped if needed to cover the entire box.

background-size Equivalent

This example uses background-size: cover to make a background image fill the container similarly.

html

<style>
  .background-container {
    width: 300px;
    height: 200px;
    border: 2px solid #333;
    background-image: url('https://via.placeholder.com/400x300');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
<div class="background-container"></div>

Output

A 300x200 pixel box with the placeholder image as a background filling the box completely, cropped if needed.

When to Use Which

Choose object-fit when you want to control how an <img> or replaced element fits inside its container, especially when the image is part of the content. It keeps the image semantic and accessible.

Choose background-size when you want to style decorative images or backgrounds that are not part of the main content, allowing more control over multiple backgrounds and layering.

In short, use object-fit for inline images and background-size for CSS backgrounds.

Key Takeaways

object-fit controls image fitting inside replaced elements like <img>.

background-size controls the size of CSS background images on any element.

object-fit affects layout and content, background-size affects only background rendering.

Use object-fit for content images and background-size for decorative backgrounds.

background-size supports multiple backgrounds; object-fit does not.