CSS Background Position Property

Syntax

Some valid values examples for background position are:

Background Position in CSS

The position defines the x and y coordinates to place the background. It is relative to the edge of the container element.

We can understand this with the help of an example:

Let's consider this, background-position: 30% 70%;

Here the black border represents the respective container. So, here X is 30%, which means that the image will be at a distance of 30% from the left edge, and Y is 70%, which means it will be at a distance of 70% from the top edge.

This can be defined using one value to four values.

If we use one value, it will be used as the horizontal offset, and the browser will set the vertical offset to default which is the center.

If we use two values, the first value is used as the horizontal offset, and the second value is used as the vertical offset.

Using the three values and four values is a little different. The length-percentage values are offset for the preceding keyword when we use the three value or four value.

All these we have explained using examples below :

<position>

1-value syntax

The keyword center can be used to set the background position to the center.

Example

Output

Here the black border represents the respective container.

We can use any of the values from (top, bottom, left, right), this specifies the background relative to the edge. The other dimension is then set to 50% by default, which means that using this, the element will be placed in the middle of the edge, which is specified in the background-position.

Example

Output

This will set the position in the middle of the top edge. Here the black border represents the respective container.

These are some other examples of 1-value syntax

We can also use length or percentage to specify the positions. This will specify the value of the X coordinate relative to the left edge, and the Y coordinate is by default set to 50%.

2-value syntax

When we use the 2-value syntax one value specifies the value of the X coordinate, and the other value is used to specify the value for the Y coordinate.

If left or right is given, then this specifies the value of the X coordinate, and the other value will be used as the value of the Y coordinate. If the value given is top or bottom, it will define the value of the Y coordinate, and the other value will be used as the X coordinate.

We can also use length or percentage. If one value is left or right, then this will be the value of the Y coordinate and will be relative to the top edge, and if the value given is top or bottom, it will be used as the Y coordinate, and the other value will be the X coordinate.

We should keep in mind that when one value is left or right, the other value can not be left or right, and if one value is top or bottom, then the other value cannot be top or bottom. i.e., the values left left, left right, right left, top top, top bottom, etc. are invalid. Some valid examples can be top left, bottom right, etc.

When we are paring the values left, right, top, and bottom, the browser can reorder the values internally, which means the top right and right top will render the same output, but when we are using length or percentage with a keyword it is important to put values in proper order, i.e. the first value will specify X and the second value will specify Y.

Example

Output

Here the black border represents the respective container.

Example

Output

Here the black border represents the respective container.

3-value syntax

We can use the 3-value syntax for the CSS background-position where the two values are keywords, and the third value is the offset for the value preceding it.

If left or right is given, it will specify the X value, and the other will be Y. If the top or bottom is given, it will specify Y, and the other value will be X.

If we use length or percentage as the second value, it will be the offset for the first value, and if length or percentage is given as the third value, then the value will be the offset for the second value.

In the three-value syntax, the browser interprets the fourth value as 0 (zero) by default.

We cannot pair one keyword value with two lengths or percentage values. This will be invalid.

Example

Output

Here the black border represents the respective container.

4-value syntax

While using the four value syntax, the first and the third values are keyword values from left, right, top, and bottom used to specify X and Y, and the second and third values are offset values for the preceding X and Y keyword values.

The length or percentage values are used for the second and fourth values.

The second value is the offset value for the first keyword value.

The fourth value is the offset value for the third keyword value.

The order of the values will be keyword value followed by length or percentage, and the again keyword followed by length or percentage.

Example

Output

Here the black border represents the respective container.

Percentages

When we use percentages to specify the offset values for the background image, the percentage offset is relative to the container of the background image. This means that the percentage offset of 0% means that the left edge of the image will be aligned with the left edge of the container, and 100% means that the right side of the image will be aligned with the right side of the container. 50% means the middle of the specified edge.

Similarly, background-position: 30% 70% will set the position of the background image 30% from the left and 70% from the top of the container.

Examples

Positioning Background Images

Each of the below examples uses the CSS background-position property to set the position for the background image.

Here the example shows how to set the pc image to different positions.

Output

Here the black border represents the respective container.

Output

Here the black border represents the respective container.

Browser Support

The list of browsers that support the CSS Background Position Property is listed below :

• Chrome
• Edge
• Firefox
• IE
• Safari
• Opera
• Webview android

Related Properties

• background-repeat
• background-attachment
• Background-size
• background-position-x
• background-position-y