CSS background-size Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS background-size scaling a background image with cover, contain, and length values
Definition

Definition and Usage

The background-size property sets how large a background-image is drawn. Leave it at its natural size with auto, stretch it with lengths or percentages, or fit the box with cover and contain while keeping the aspect ratio.

The initial value is auto. The property is not inherited. Percentages are relative to the background positioning area from background-origin. Gaps not covered by the image show the background-color. It applies to every element, including ::first-letter and ::first-line.

Standard-track.

Not deprecated and not experimental. Baseline widely available. In the background shorthand, size must follow position with a slash: center / cover.

Syntax

CSS Syntax

syntax.css
background-size: auto | cover | contain | <length> | <percentage> | initial | inherit;

One value sets the width; height becomes auto. Two values set width then height. Separate sizes for multiple images with commas.

Values

Property Values

ValueDescriptionTry it
autoDefault. Keep the image's natural size (or proportional height)Try it
coverScale to fill the box. May crop. Keeps the aspect ratioTry it
containScale to fit inside the box. May leave gaps. Keeps the aspect ratioTry it
<percentage>Width relative to the positioning area. Example: 50%Try it
<length> <length>Explicit width and height. Example: 100px 60pxTry it
initialResets this property to autoTry it
inheritCopies this property from the parent elementTry it
Approach

How to Use background-size

Add an image first, give the box a size, then choose how that image scales inside it.

  1. Set a background-image. Size has nothing to scale without an image.
  2. Give the element a visible area with content or a height.
  3. Set background-size to cover, contain, a length, a percentage, or two values.
  4. For heroes and logos, also set background-repeat: no-repeat so a smaller size does not tile.
PieceRequired?Role
background-imageYesThe paint you are scaling
A visible boxYesHeight or content so cover and contain have a target
Size keyword or lengthsYescover, contain, auto, or explicit sizes
background-repeatOftenno-repeat stops tiling when the image is smaller than the box
background-positionNoWhere the scaled image sits, often center with cover
Try it

Live Preview

One box with a fixed-ratio SVG. Change background-size and watch how the blue card scales.

Dark fill is background-color. Gaps mean the image does not fill the box.

Size
Scaled image

background-size: cover

Code

CSS Examples

Each snippet adds only what background-size needs: an image, a box, and the size. Use Try It Yourself for a live editor.

Example 1 — cover

Fill the whole box. Edges may be cropped so nothing of the dark color shows through.

CSS
<style>
  div {
    height: 160px;
    padding: 16px;
    color: #fff;
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80'><rect width='120' height='80' fill='%231d4ed8'/><circle cx='60' cy='40' r='28' fill='%2338bdf8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
</style>

<div>Scaled image</div>
Try It Yourself

How It Works

  1. Load an image with a real size. The SVG is 120×80, so it has an aspect ratio. That ratio is what cover protects.
  2. Give the box a height. Without a visible area, you cannot see scaling.
  3. Scale until the box is full. cover grows the image until both width and height cover the element. Extra parts are cropped.
  4. Center the crop. background-position: center chooses which part stays visible. no-repeat keeps a single copy.

Example 2 — contain

Fit the whole image inside the box. Empty bands show the background color.

CSS
<style>
  div {
    height: 160px;
    padding: 16px;
    color: #fff;
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80'><rect width='120' height='80' fill='%231d4ed8'/><circle cx='60' cy='40' r='28' fill='%2338bdf8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
</style>

<div>Scaled image</div>
Try It Yourself

How It Works

  1. Same image, different keyword. Only contain changes from Example 1.
  2. Fit without cropping. The image grows until one side hits the box edge. The other side may leave a gap.
  3. Gaps show the color. background-color: #0f172a fills the leftover bands.
  4. Stop tiling. Without no-repeat, a contained image that is smaller than the box would tile by default.

Example 3 — Explicit Lengths

Set width and height yourself. The aspect ratio is not protected unless you pick matching numbers.

CSS
<style>
  div {
    height: 160px;
    padding: 16px;
    color: #fff;
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80'><rect width='120' height='80' fill='%231d4ed8'/><circle cx='60' cy='40' r='28' fill='%2338bdf8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 60px;
  }
</style>

<div>Scaled image</div>
Try It Yourself

How It Works

  1. Two values mean width then height. 100px 60px draws the image at exactly that size.
  2. One value would set only the width. 100px alone keeps height as auto and preserves the ratio when the image has one.
  3. Percentages use the positioning area. 50% is half the width of the area from background-origin, not half of the image file.
  4. Negative sizes are invalid. The browser ignores a negative length or percentage.

Edge Cases & Pitfalls

If the image looks tiled, stretched wrong, or unchanged, one of these is usually why.

repeat

contain can tile by default

If the scaled image is smaller than the box, background-repeat starts at repeat and fills the gaps with copies. Use no-repeat for a single logo or photo.

slash

Shorthand needs position / size

In background, write center / cover. A bare cover in the shorthand is not enough without a position and slash.

gradient

Gradients have no natural size

CSS gradients have no intrinsic dimensions. With auto, they often fill the positioning area, so cover and contain can look the same. Use a file or SVG with width and height to study the keywords.

crop

cover always may crop

When the box ratio differs from the image ratio, edges are cut off. Keep important subject matter near the center, or switch to contain.

a11y

Background images stay decorative

Screen readers do not announce them. Put meaning in an img with alt, and keep text contrast strong over cropped or scaled paint.

Compatibility

Browser Support

background-size is a browser painting property. Node.js, Deno, and Bun do not apply it. cover and contain are Baseline and widely available.

✓ Baseline · Widely available since 2015

background-size

cover and contain: Chrome 4+, Firefox 3.6+, Safari 5+, Edge 12+, Opera 10+, Samsung Internet 4+, Internet Explorer 9+. Lengths and percentages follow the same modern support.

97% Global support
Google Chrome 4+ cover/contain
Full support
Mozilla Firefox 3.6+
Full support
Apple Safari 5+
Full support
Microsoft Edge 12+
Full support
Opera 10+
Full support
Samsung Internet 4+
Full support
Internet Explorer 9+
Full support
background-size Widely supported

Bottom line: Safe for cover, contain, lengths, and percentages in current browsers. Internet Explorer 8 and older lack the property. Prefer an image with intrinsic size when teaching or testing cover vs contain.

Remember

Key Takeaways

  • Role: set how large the background image is drawn inside the box.
  • Keywords: cover fills (may crop); contain fits (may leave gaps); auto is the default.
  • Two values: width then height. One value sets width; height becomes auto.
  • Pair with: no-repeat and often center for heroes and logos.

One line: background-size answers “how big is this background image inside the box?”

Frequently Asked Questions

It sets the width and height of a background image. You can keep the natural size, stretch with lengths or percentages, or use cover and contain to fit the box while keeping the aspect ratio.
auto, which is the same as auto auto. A bitmap keeps its natural size. Empty space shows the background-color.
cover scales up until the box is filled and may crop edges. contain scales until the whole image fits and may leave empty bands that show the background-color. Both keep the aspect ratio.
The default background-repeat is repeat. If the scaled image is smaller than the box, it tiles. Pair contain (or a length size) with background-repeat: no-repeat when you want one copy.
Write size after position with a slash, such as center / cover. Size is not valid in the shorthand without that slash after a position.
It is Baseline and widely available. cover and contain work in Chrome 4+, Firefox 3.6+, Safari 5+, Edge 12+, and Internet Explorer 9+. It is a browser painting property. Node.js, Deno, and Bun do not apply it.

Next: block-size

Learn the logical size of a block — height in horizontal writing modes.

block-size tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS background-repeat Property CSS block-size Property