The cover of The Complete Idiot's Guide to Create a Web Page 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:

W3C StandardInternet ExplorerNetscape Navigator
CSS1 and later 4.0 and later Not supported
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 StandardInternet ExplorerNetscape 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 StandardInternet ExplorerNetscape 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 |