? CSS Background Position

⚡ Quick Overview

The background-position property in CSS is used to control the position of a background image within an element. By default, the background image is placed at the top-left corner, but you can move it to the center, bottom, or to any specific offset using keywords, percentages, or pixel values.

? Key Concepts

background-position controls where the background image is drawn inside the box.
Common keyword values: top, center, bottom, left, right.
You can combine keywords: e.g. top left, center center, top center.
You can also use lengths (px) or percentages: background-position: 50px 100px; or 50% 50%.
Often used together with background-repeat and background-size for better control.

? Syntax

Basic pattern: background-position: x-position y-position;

? View Syntax Example

/* Basic background-position syntax */
selector {
background-position: x-position y-position;
}

? Practical Examples

Below are a few common ways to position background images using keywords and pixel values.

? View Code Example

/* Top-left position */
.container-box {
background-image: url('https://via.placeholder.com/300x150');
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
}
/* Centered position */
.centered-background {
background-image: url('https://via.placeholder.com/300x150');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* Custom pixel values */
.custom-position {
background-image: url('https://via.placeholder.com/300x150');
background-position: 50px 100px;
background-repeat: no-repeat;
background-size: contain;
}

? Live Output & Explanation

Centered Background Demo

This box has a background image centered inside the element using background-position: center center;.

Here we used:

background-position: center center; to place the focal point in the middle.
background-size: cover; (via inline style) so the image covers the entire box.
background-repeat: no-repeat; (implicit when using cover) to avoid tiling.

? Background Position & Related Properties

Some useful background-related properties that are commonly used together:

Property	Description	Example Value
`background-position`	Position of the background image inside the element.	`top left`, `center`, `50px 100px`
`background-repeat`	Controls whether the background image repeats.	`repeat`, `no-repeat`
`background-size`	Controls how the background image is scaled.	`cover`, `contain`

? Common Use Cases

Hero sections with a centered subject (e.g., a person or product).
Card backgrounds where you want the focus on a particular area of the image.
Pattern backgrounds that should start from a specific corner.
UI elements where icons or logos must be aligned precisely inside a button or badge.

? Tips & Best Practices

Use percentage values (e.g. background-position: 50% 50%) for more flexible, responsive positioning.
For precise control, use pixel values like background-position: 10px 20px to move the image from the top-left corner.
Always include units for length values: background-position: 50 100; ❌ vs background-position: 50px 100px; ✅.
Combine with background-size: cover or contain to keep the image looking good on different screen sizes.
If you don't want the image to tile, explicitly set background-repeat: no-repeat;.
Prefer center or center center when you want the main subject always visible in the middle.

? Try It Yourself

Create a <div> with a background image and experiment with: background-position: top left, center, and bottom right. Observe how the visible area changes.
Use pixel offsets like background-position: 50px 50px; to “nudge” the image into the exact spot you want.
Combine background-position with background-size: cover and background-size: contain and compare the results on different screen sizes.
Build a card layout with different boxes using: .top-left, .centered, and .custom-position classes to solidify the concept.