CSS Background-Position Property

The background-position property specifies the position of the background. The values can be specified in three ways: keywords, percentage values, and position values. Each is discussed in detail below.

Keywords

This is often displayed as a two-word combination of the following terms,

top, bottom, left, right, center

The words can be in either order. For example, "top left" and "left top" are equivalent.

When keywords are used, it refers to both the position of the element and the position of the image. For example, if we specify "bottom left," it means the bottom left corner of the image touches the bottom left corner of the element. Below is an example.

CSS declaration

background-image: url(1keydata.gif); background-repeat: no-repeat; background-position: bottom left;

Result:

If only one keyword is used, we get the following:

Keyword	Horizontal Position	Vertical Position
left	left	center
right	right	center
top	center	top
bottom	center	bottom
center	center	center

Percentage Values

This is shown as two percentage values: The first indicating the horizontal percentage, and the second indicating the vertical percentage. The two values are separated by space.

Similar to keywords, the percentage values refer to both the position of the element and the position of the image. For example, "30% 25%" means that a point that is 30% from the left of the image and 25% from the top of the image is aligned with a point that is 30% from the left of the element and 25% from the top of the element. An example is shown below.

CSS declaration

background-image: url(1keydata.gif); background-repeat: no-repeat; background-position: 30% 25%;

Result:

If only one percentage value is specified, it is treated as the horizontal percentage. The vertical position is treated as 50% (or center).

Position Values

This is shown as two position values: The first indicating the absolute horizontal position, the second indicating the absolute vertical position. The two values are separated by space.

When position values are used, it refers to where the top left edge of the image is located within the element. Let's look at an example below:

CSS declaration

background-image: url(1keydata.gif); background-repeat: no-repeat; background-position: 80px 120px;

Result:

In this example, the top left corner of the image is located 80px from the left of the element and 120px from the top of the element.

Negative position values can be used. When this happens, part of the background image will not be visible. Let's look at the example below:

CSS declaration

background-image: url(1keydata.gif); background-repeat: no-repeat; background-position: -80px 120px;

Result:

Here, the horizontal position is -80px, meaning the image started 80px to the left of the left border of the element. Hence only part of the image is now visible.

Default Value

The default value for background-position is [top left]. This is equivalent to specifying 0%, 0% in percentage values and 0, 0 for position values.