background-position: ***;
| Browser |
|
|---|
The background-position property specifies the position of a background image.
Applying this property to the BODY element applies the specified style to background of an entire page.
body {
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center;
}
| Property | Value | Explanation |
|---|---|---|
| background-position | position | the horizontal and vertical positions |
There are two ways to specify the position.
Position by the Keyword
| Horizontal position | left | center | right |
|---|---|---|---|
| Vertical position | top | center | bottom |
For example :
background-position: right bottom; : The right bottom position.
background-position: center center; : The center position.
If you only specify one keyword, the other value becomes "center".
For example :
background-position: right; : The right center position.
background-position: bottom; : The bottom center position.
background-position: center; : The center position.
Position by %, pixels, or other units
The first value is the horizontal position (The distance from the left side) and the second value is the vertical position (The distance from the top side).
For example :
background-position: 100px 40px; : The position to 100px from the left and 40px from the top.
background-position: 30% 60%; : The position to 30% from the left and 60% from the top.
background-position: 100px 60%; : The position to 100px from the left and 60% from the top.
If you only specify one value, the other value becomes "50%".
For example :
background-position: 100px; : The position to 100px from the left and 50% from the top.
background-position: 50%; : The position to 50% from the left and 50% from the top.
Example
<html>
<head>
<title>TAG index</title>
<style type="text/css">
body {
background-color: #ffffff;
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center;
color: #000000;
}
</style>
</head>
<body>
</body>
</html>
- Output
-
back.gif
Example page
<html>
<head>
<title>TAG index</title>
<style type="text/css">
body {
background-color: #ffffff;
background-image: url(image/back.gif);
background-repeat: repeat-x;
background-position: left bottom;
color: #000000;
}
</style>
</head>
<body>
</body>
</html>
- Output
-
back.gif
Example page