|
|
|
|
The background-position property sets the initial position of a background picture relative to the tag by specifying horizontal and vertical offsets. You specify the horizontal position followed by the vertical position. If you enter only one value, the browser uses it for both the horizontal and vertical offset. For example: {background-position: URL("back.gif") 0% 100%;}
{background-position: URL("back.gif") left bottom;}
You can either use the keywords left, center, right, top, middle, bottom, percentage values, or distances in millimetre, centimetres, inches, points, picas, pixels, ems or exs. A value such as 20% 65% specifies that the picture be placed at the point 20% across and 65% down the tag. A value such as 5px 10px specifies that the upper left corner of the picture be placed 5 pixels to the right of and 10 pixels below the upper left corner of the tag. If you set an absolute value, this might make a mess if a user resizes a window or changes the browser settings. You can use combinations of lengths and percentages including negative positions. For example, 10% -2cm is permitted. However, you can’t combine percentages and lengths with keywords. If you fix the background picture, the browser puts the picture relative to the window instead of the tag. |
More information Background colours and pictures background-position |
