
The Complete Idiot's Style Sheets Reference
| Index
| Current Category: Backgrounds |
| Previous Style: background-image
| Next Style: background-repeat
|
background-position
Specifies the initial position of a non-tiled background image.
Support:
-
Possible Values:
- [x y]
The exact position of the background image. x represents the position from the left, and y represents the position from the top.
-
Support:
-
W3C Standard | Internet Explorer | Netscape Navigator |
CSS1 and later |
4.0 and later |
Not supported |
- [x-percent y-percent]
The position of the background image as a percentage of the browser screen. x-percent represents the position from the left, and y-percent represents the position from the top.
-
Support:
-
W3C Standard | Internet Explorer | Netscape Navigator |
CSS1 and later |
4.0 and later |
Not supported |
-
Notes:
-
Instead of a percentage value, you can also use one of the following keywords for x-percent:
left |
This is the same as using 0%. |
center |
This is the same as using 50%. |
right |
This is the same as using 100%. |
Instead of a percentage value, you can also use one of the following keywords for y-percent:
top |
This is the same as using 0%. |
center |
This is the same as using 50%. |
bottom |
This is the same as using 100%. |
Example:
- The following tag places the background image in the upper left corner of the browser screen:
<BODY STYLE="background-image: url(bg03.gif);
background-repeat: no-repeat;
background-position: 0 0">
The following tag places the background image in the lower right corner of the browser screen:
<BODY STYLE="background-image: url(bg03.gif);
background-repeat: no-repeat;
background-position: right bottom">
| Index
| Current Category: Backgrounds |
| Previous Style: background-image
| Next Style: background-repeat
|
|