CSS background-position

<!doctype html>
<title>Example</title>
<style>
.imagePositionBox {
  height: 150px;
  padding: 30px;
  border: 1px solid black;
  background-image: url("/pix/samples/bg2.png");
  background-repeat: no-repeat;
  background-position: 90% 30%;
}
</style>
<div class="imagePositionBox">
<p>This div element has a background-image with background-repeat set to no-repeat and background-position set to '90% 30%'.</p>
</div>

The CSS background-position property is used to position a background image.

Syntax

Where

Possible Values

percentage: Specifies the image's position as a percentage. This represents an offset of the top left corner of the background image from the top left corner of the background positioning area.
length: Specifies the image's position as a length. This represents an offset of the top left corner of the background image from the top left corner of the background positioning area.
top: Computes 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.
right: Computes 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.
bottom: Computes 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.
left: Computes 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.
center: Computes 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.

If only one value is specified, the second value is assumed to be center. If two values are given, a length or percentage as the first value represents the horizontal position (or offset) and a length or percentage as the second value represents the vertical position (or offset).

If three or four values are given, then each percentage or length represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. If three values are given, the missing offset is assumed to be zero.

Negative values are allowed. These represent an offset outward from the edge of the background positioning area.

For more information on valid values, see the position data type.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: 0% 0%
Applies To: All elements
Inherited?: No
Media: Visual
Animatable: Yes (see example)

Example Code

Here are some code examples to demonstrate the various ways of specifying a background position.

Official Specifications

CSS Backgrounds and Borders Module Level 3 (W3C Candidate Recommendation 9 September 2014)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)