Background Position

Background Position CSS Property

The background-position CSS property specifies the initial position of a background image. It is defined by two values representing the x-axis (horizontal) and y-axis (vertical) positions. Here is a breakdown of its axes:

  • X-axis (Horizontal Position):

    • Can take values like left, center, right, or a specific length or percentage.

    • Determines the starting point of the image along the horizontal direction.

    • % defines the position relative to the width of the element.

  • Y-axis (Vertical Position):

    • Can take values like top, center, bottom, or a specific length or percentage.

    • Determines the starting point of the image along the vertical direction.

    • % defines the position relative to the height of the element.

    The background-position property allows precise control over the placement of a background image within its container.

Possible Values

Value
Units (Equivalent %)
Axis
Description

Any number

px

Both

A fixed, absolute size.

Any number

rem

Both

Relative to the root element’s font size (usually 16px by default).

Any number

%

Both

Relative to the width of the element's containing block (usually its parent).

Any number

vw

Both

Relative to the width of the viewport.

Any number

vh

Both

Relative to the height of the viewport.

N/A

unset

Both

Resets the min-width to inherit from a parent if inheritable, or removes it if not. It's like "undoing" any previous setting.

N/A

Center (50%)

Both

Centers the background image horizontally within the element.

N/A

Left (0%)

Horizontal

Aligns the background image to the left edge of the element.

N/A

Right (100%)

Horizontal

Aligns the background image to the right edge of the element.

N/A

Top (0%)

Vertical

Aligns the background image to the top edge of the element.

N/A

Bottom(100%)

Vertical

Aligns the background image to the bottom edge of the element.

Example

Here is a visual example demonstrating the background-position property for both x-axis and y-axis of the given image:

  1. In this example, the background image is positioned 75% from the left (x-axis) and 25% from the top (y-axis) of the container. Adjust the percentages to experiment with different positions.

Here is another example using keyword values for background-position:

  1. In this example, the background image is positioned at right top, meaning the image will start from the right edge on the x-axis and align with the top edge on the y-axis of the container. Here right = 100% and top = 0%

PreviousBackground ImageNextBackground Size

Last updated