Background size in CSS - Browser Rendering Trace

Render Flow - Background size

[Parse CSS] -> [Match selector] -> [Apply background-image] -> [Apply background-size] -> [Calculate box size] -> [Draw background] -> [Composite layers]

The browser reads the CSS, finds the element, applies the background image, then uses background-size to decide how big the image should be before drawing it behind the content.

Render Steps - 4 Steps

Code Added:background-image: url('https://via.placeholder.com/150');

Before

[box]
Hello

→

After

[box with background image repeated]
Hello

The background image appears behind the text, repeating by default to fill the box.

🔧 Browser Action:Loads image, paints background with default repeat

Code Sample

A box with a background image sized to fit inside the box without cropping, centered and not repeated.

CSS

<div class="box">Hello</div>

CSS

.box {
  width: 15rem;
  height: 10rem;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #333;
}

Render Quiz - 3 Questions

After applying step 3, where is the background image positioned inside the box?

A Top-left corner of the box

B Centered inside the box

C Bottom-right corner of the box

D Repeated across the box

Common Confusions - 3 Topics

Why does my background image look blurry when I use background-size?

Scaling an image up with background-size can make it blurry because the browser stretches the pixels. Use a higher resolution image to keep it sharp.

💡 Scaling up enlarges pixels, causing blur; scaling down keeps sharpness.

Why does background-size: cover crop part of my image?

Cover makes the image fill the entire box, so if the box and image have different shapes, some edges get cut off to avoid empty space.

💡 Cover fills box fully but may crop edges to keep aspect ratio.

Why doesn't background-size work when I use background shorthand?

If you set background shorthand without specifying background-size separately or with slash syntax, background-size may reset or not apply.

💡 Use separate background-size property or include it after slash in shorthand.

Property Reference

Property	Value	Visual Effect	Common Use
background-size	auto	Image shown at original size	Default, no scaling
background-size	cover	Image covers entire box, may crop	Fill background fully, keep aspect ratio
background-size	contain	Image fits inside box, no cropping	Show whole image inside box
background-size	<length> <length>	Image sized to exact width and height	Precise control of image size
background-size	<percentage> <percentage>	Image sized relative to box size	Responsive scaling

Concept Snapshot

background-size controls how a background image fits inside its box. Default is auto (original size). contain scales image to fit inside without cropping. cover scales image to fill box, cropping if needed. Use length or percentage for exact sizing. Works with background-position and background-repeat.