CSS background-position Property

Description

The CSS background-position property controls the initial placement of a background image within an element’s background area. It determines where the image will appear in relation to the element’s edges and padding. By default, a background image is placed at the top-left corner of the element, but background-position allows developers to adjust this placement both horizontally and vertically. The property works seamlessly with other background-related properties such as background-repeat and background-size, allowing for more complex and visually appealing layouts.

background-position accepts values that can be specified using keywords, percentages, or length units. Keywords like top, bottom, left, right, and center provide a simple way to position images without exact measurements. Percentages allow fine-grained control, where 0% 0% aligns the image to the top-left corner, and 100% 100% moves it to the bottom-right. Length units such as pixels or ems offer precise control over the image’s offset, which can be especially useful when designing responsive interfaces or aligning multiple background images across different elements.

An important consideration when using background-position is how it interacts with other properties and the element’s box model. For instance, when combined with background-attachment, which can fix a background relative to the viewport, background-position determines the starting point of the fixed image. Additionally, when using multiple background images, the property can take a comma-separated list of positions, each corresponding to a specific image in the stack. This versatility allows designers to layer and align images creatively, ensuring that the visual design remains consistent across different screen sizes and devices.

Definition

Initial value: 0% 0%
Applies to: All elements
Inherited: No
Computed value: A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
Animatable: Yes
JavaScript syntax: object.style.backgroundPosition

Interactive Demo

background-position: top;

background-position: left;

background-position: center;

background-position: 25% 75%;

background-position: bottom 50px right 100px;

Syntax

background-position: <position> [ , <position> ]*

Values

topComputes to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.
rightComputes to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.
bottomComputes to '100%' for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.
leftComputes to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.
centerComputes to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is.
<length>A length value gives a fixed length as the offset. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area.
<percentage>A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by 'background-size'.

Example

HTML

<div class='demo'>

  <h2>background-position examples</h2>

  <div class='card keyword'>Top left (keyword)</div>

  <div class='card percent'>30% 70% (percentage)</div>

  <div class='card length'>20px 40px (length)</div>

</div>

CSS

/* Layout */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f4f6;
  padding: 2rem;
}
.demo {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}
.demo h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: #111827;
}
.card {
  height: 140px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect width='100%25' height='100%25' fill='transparent'/><circle cx='20' cy='20' r='16' fill='%23ff6347'/></svg>");
  background-repeat: no-repeat;
  background-size: 120px;
}

/* Examples of different background-position syntaxes */
.card.keyword {
  background-position: left top;
  background-color: #111827;
}
.card.percent {
  background-position: 30% 70%;
  background-color: #047857;
}
.card.length {
  background-position: 20px 40px;
  background-color: #1d4ed8;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background-position property. Hover over a browser icon to see the version that first introduced support for this CSS property.