background-position

Definition

The background-position property sets the starting position of a background image.

Syntax

.hero {
  background-image: url("/images/aurora.jpg");
  background-position: center top;
  background-size: cover;
}

Values

center, top, left, right, bottom: keyword anchors.
<length> or <percentage>: horizontal and vertical offsets (e.g., 50% 20%, 1rem 0).
calc() expressions mix percentages and lengths for fine tuning.
Multiple positions can be declared when layering images.

Practical Examples

.card {
  background: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800&q=80")
    left top / cover no-repeat;
}

.card--focus {
  background-position: 70% 30%;
}

Adjust the focal point of hero images without editing the source asset.

HTML

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="h-36 rounded-xl border border-slate-200" style="background: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800&q=80') left top / cover no-repeat;"></div>
  <div class="h-36 rounded-xl border border-slate-200" style="background: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800&q=80') 70% 30% / cover no-repeat;"></div>
</div>

Tips & Best Practices

Pair with background-size: cover to crop hero images while keeping a consistent focal point.
Use percentages to keep the subject aligned as the container resizes.
Combine with media queries or container queries for art direction on different breakpoints.

Accessibility & UX Notes

Ensure important content remains visible; avoid positioning that hides text overlays or interactive elements.

Browser Support

Long-supported across browsers. Two-value syntax and calc() expressions require modern engines but are widely available.

object-position for equivalent control on replaced elements.
background-size and background-repeat to adjust cropping and tiling.
background-attachment for parallax-style treatments.