Background position in CSS - Browser Rendering Trace

Render Flow - Background position

[Parse CSS] -> [Find background-position property] -> [Calculate position values] -> [Apply position to background image] -> [Paint background at calculated position]

The browser reads the CSS, finds the background-position property, calculates where the background image should appear inside the element, then paints it at that spot.

Render Steps - 3 Steps

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

Before

[box]
 _________
|         |
|  Hello  |
|_________|

→

After

[box with repeated background image top-left]
 _________
|[IMG][IMG]|
|[IMG]Hello|
|_________|

Adding a background image places it at the top-left corner by default (repeating) behind the text.

🔧 Browser Action:Loads image, paints repeating background at default position (top-left).

Code Sample

A box with a background image placed in the center, no repeat, with a visible border.

CSS

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

CSS

.box {
  width: 12rem;
  height: 8rem;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  background-position: center;
  border: 0.1rem solid #333;
}

Render Quiz - 3 Questions

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

A Centered horizontally and vertically

B Top-left corner

C Bottom-right corner

D Tiled across the box

Common Confusions - 2 Topics

Why doesn't the background image move when I change background-position?

If background-repeat is set to repeat, the image tiles and it may look like it didn't move. Also, if the container is smaller than the image, positioning changes might be less visible.

💡 Set background-repeat: no-repeat to clearly see background-position changes (see render_step 2).

Why does background-position accept two values?

The first value moves the image horizontally, the second vertically. If only one value is given, the second defaults to center.

💡 Use two values like 'right bottom' or '10px 20px' to control both directions.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
background-position	left top	horizontal & vertical	Background image placed at top-left corner	Default position
background-position	center center	horizontal & vertical	Background image centered inside element	Centering background images
background-position	right bottom	horizontal & vertical	Background image placed at bottom-right corner	Positioning at edges
background-position	50% 25%	horizontal & vertical	Background image placed at 50% from left and 25% from top	Precise positioning with percentages
background-position	10px 20px	horizontal & vertical	Background image offset by 10px right and 20px down	Exact pixel positioning

Concept Snapshot

background-position sets where the background image appears inside an element. Default is 'left top' (top-left corner). Two values control horizontal and vertical placement. Works best with background-repeat: no-repeat to see clear positioning. Values can be keywords (center, right) or lengths (px, %).