The background-position property sets where within an element's box a background image starts being placed, using keywords, lengths, or percentages for its horizontal and vertical offset.

Syntax

background-position: horizontal vertical;

Deep Dive Course

background-position accepts two values, horizontal offset first, then vertical, using keywords like left, center, and right paired with top, center, and bottom, or explicit length/percentage values measured from the top-left corner by default. A percentage value is calculated relative to the difference between the element's size and the background image's size, not simply a percentage of the element's own dimensions, which is why background-position: 50% 50% correctly centers an image regardless of its actual size, rather than placing it at the literal midpoint of the container.

1Understanding Background-position

💡

background-position: center center, or simply center, reliably centers a background image both horizontally and vertically regardless of the image's or container's actual size, since percentage positioning accounts for the size difference between the two rather than just the container's raw dimensions.

editor.html

.hero {
  background-image: url("hero.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

localhost:3000

2Practical Example

Here is a real-world application of Background-position showing how it is used in production CSS code.

editor.html

.icon-box {
  background-image: url("icon.png");
  background-position: right 10px top 10px;
  background-repeat: no-repeat;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Background-position:

1. Use the center keyword, or 50% 50%, to reliably center a background image regardless of the element's or image's exact dimensions

2. Pair background-position with background-size: cover for a common, responsive full-bleed background image pattern that stays centered and properly cropped at any container size

3. Use explicit length values, like background-position: 20px 10px, when you need a precise, fixed offset rather than a keyword-based or percentage-based position

⚠️

Tip: background-position: center center, or simply center, reliably centers a background image both horizontally and vertically regardless of the image's or container's actual size, since percentage positioning accounts for the size difference between the two rather than just the container's raw dimensions.

editor.html

.hero {
  background-image: url("hero.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

localhost:3000

Examples

Example 01Basic Usage

.hero {
  background-image: url("hero.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

Example 02Advanced Example

.icon-box {
  background-image: url("icon.png");
  background-position: right 10px top 10px;
  background-repeat: no-repeat;
}

Best Practices

Use the center keyword, or 50% 50%, to reliably center a background image regardless of the element's or image's exact dimensions
Pair background-position with background-size: cover for a common, responsive full-bleed background image pattern that stays centered and properly cropped at any container size
Use explicit length values, like background-position: 20px 10px, when you need a precise, fixed offset rather than a keyword-based or percentage-based position

Interview Question

Why does background-position: 50% 50% actually center a background image, rather than positioning it based purely on the container's own midpoint coordinates?▼

Hint: Think about what exactly a percentage value in background-position is calculated relative to — the container's raw size, or the difference between the container's and image's sizes.

A percentage value in background-position isn't calculated as a straightforward percentage of the container's own width and height the way you might initially assume — instead, it's calculated relative to the difference between the container's size and the background image's own size, specifically representing that same percentage point along both the container's excess space and the image's own dimension. At 50%, this formula works out to exactly half of the leftover space, container size minus image size, on each side, which is precisely what visually centers the image regardless of how large or small either the container or the image actually is. This is exactly why background-position: 50% 50%, or the equivalent center keyword, reliably centers a background image in any situation, while a naive percentage-of-container-size interpretation would instead position the image's own top-left corner at the container's midpoint, which would visually look off-center rather than properly centered, especially for a larger image.

Exercises

MediumPractice using Background-position in a real scenario.

View Solution

.hero {
  background-image: url("hero.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

Frequently Asked Questions

Why does background-position: 50% 50% actually center a background image, rather than positioning it based purely on the container's own midpoint coordinates?▼

Related Functions

Background-imageBackground-sizeBackground-repeat