CSS background-position Property

Sets the initial starting position for a background image within its container.

selector { background-position: value; }

left	Aligns the image with the left edge of the background positioning area.
center	Centers the image within the background positioning area.
right	Aligns the image with the right edge of the background positioning area.
top	Aligns the image with the top edge of the background positioning area.
bottom	Aligns the image with the bottom edge of the background positioning area.
<percentage>	Sets the position as a percentage relative to the container and the image size itself.
<length>	Sets the position using specific units like px, em, or rem from the edges.

Code Examples

This basic example places a single background image perfectly in the center of the div container.

<div style="width: 100%; height: 300px; border: 2px solid #333333; background-image: url('https://www.adamkhoury.com/images/logo.png'); background-repeat: no-repeat; background-position: center center;"></div>

This advanced example uses JavaScript to update the background-position dynamically based on mouse movement, creating an interactive tracking effect.

<div id="box" style="width: 100%; height: 400px; background-color: #f0f0f0; background-image: url('https://www.adamkhoury.com/images/logo.png'); background-repeat: no-repeat; background-position: 50% 50%;"></div>
<script>
const b = document.getElementById("box");
b.addEventListener("mousemove", (e) => {
  let x = (e.clientX / window.innerWidth) * 100;
  let y = (e.clientY / window.innerHeight) * 100;
  b.style.backgroundPosition = x + "% " + y + "%";
});
</script>

Pro Tip

The four-value syntax is a life-saver for responsive design. Instead of guessing percentages to keep an image away from an edge, you can use "right 10px bottom 10px". This keeps your image exactly 10 pixels away from those specific edges regardless of how the container grows or shrinks.

Deep Dive

Think of the container as a picture frame and the background image as the photo inside. This property decides where that photo sits. By default, it is pinned to the top-left corner. You can move it using keywords like "center" or "bottom", or get surgical with pixel values and percentages. Percentages are the smartest of the bunch; 50% doesn't just move the top-left corner to the middle, it aligns the 50% mark of the image with the 50% mark of the container, ensuring it is perfectly centered. Since CSS3, you can even use a four-value syntax to offset the image from specific edges, like "right 20px bottom 10px", which gives you a specific margin from the bottom-right corner.

Best Practices

Pair this property with background-repeat: no-repeat if you only want one instance of the image appearing at your specified coordinates. If you are dealing with multiple backgrounds, separate your positions with commas to match the order of your background-image declarations. Use keywords like "center center" for simple alignments because they are easy to read and maintain for anyone else looking at your code.

Common Pitfalls

A common mistake is forgetting that using the shorthand "background" property will reset background-position to its default if you do not specify it within that shorthand. Also, remember that if you only provide one value, the browser will automatically assume the second value is "center", which might throw off your intended design if you were expecting it to stay at the top.

Accessibility

Since background images are intended for decoration, screen readers ignore them. Never put vital information inside a background image. If you use background-position to move an image behind text, make sure the contrast remains high enough for users with visual impairments to read the content clearly across all screen sizes.

Dev Data Table: background-position property

default	0% 0%
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1996
js_syntax_1	object.style.backgroundPosition = "center center";
js_syntax_2	object.style.setProperty("background-position", "center center");
js_note	When manipulating this property in JavaScript, remember to treat the coordinates as a single string and ensure you include the unit types if you are using numbers.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }