Things You'll Need:
- A text editor or an HTML editor
-
Step 1
If no background-position is named, the default position is at the top-left position of the element.
-
Step 2
A value can be assigned to this property as either a length, a percentage or using specific keywords.
-
Step 3
A length value places the background image at the exact horizontal and vertical position named. A single length value, for example:
#example {
background-position: 200px;
}
represents both a horizontal position 200px from the left and a vertical position 200px from the top. -
Step 4
Two values, represent the horizontal and vertical, for example:
#example {
background-position: 100px 200px;
} -
Step 5
Position can be given using the following keywords for horizontal positions: left, center, right. For vertical positions, these keywords are allowed: top, center, bottom. For example:
#example {
background-position: left center;
} -
Step 6
Percentage values place an image at a position related to both the element being given a background-image and the actual image itself. For example:
#example {
background-position: 30% 50%;
}
places the image at 30% of the image's width and 50% of the image's height at a position 30% from the left and 50% from the top of the containing element. -
Step 7
Certain percentage values match keywords:
0% = left or top
50% = center
100% = right or bottom
For example background-position: left top;
is the same as background-position: 0% 0%; -
Step 8
Negative length and percentage values are allowed. This can move the position of some or all of the background-image outside the boundaries of the containing element. The part outside the boundaries of the containing element would not be visible. On a user-created change, perhaps hovering over a link, the hidden part of the background image can be revealed by changing the background-position of the background-image.








