The default value for the CSS background-position property is 0 0.
When you don't explicitly set the background-position property on an element, the browser automatically applies the default value, which positions the background image or gradient at the top-left corner of the background positioning area.
Based on the provided reference:
- In terms of length, the default value is 0 0.
- The first value (
0) represents the distance from the left edge of the container. - The second value (
0) represents the distance from the top edge of the container.
This means that by default, the background image is positioned 0 pixels from the left edge and 0 pixels from the top edge, effectively placing it at the origin point.
Understanding background-position Values
The background-position property accepts various types of values, including:
- Keywords:
top,bottom,left,right,center - Length units:
px,em,%, etc.
When using length units like pixels, you typically provide two values: the horizontal position and the vertical position.
- Horizontal Position: Controls the position along the x-axis (left to right). A positive value moves the background to the right; a negative value moves it to the left.
- Vertical Position: Controls the position along the y-axis (top to bottom). A positive value moves the background down; a negative value moves it up.
Example from Reference:
Setting the background-position property to 50px 150px will move the image:
- 50 pixels to the right (from the left edge).
- 150 pixels down (from the top edge).
This contrasts with the default 0 0, where the image starts exactly at the top-left corner.
Default Value in Practice
The 0 0 default is equivalent to the keywords top left.
| Value | Description |
|---|---|
0 0 |
Default: Positioned at the top-left corner. |
top left |
Same as 0 0. |
center center |
Positions the background in the middle. |
50% 50% |
Same as center center. |
50px 150px |
50px from left, 150px from top. |
Knowing the default 0 0 is crucial for understanding how background images are initially placed and how subsequent positioning values shift them relative to this default starting point.
