background image position


background-position: ***;

Browser
Internet Explorer Firefox Opera

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

The center position (The single image)

<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
Background Image back.gif
Example page

The left bottom position (The image is only repeated horizontally)

<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
Background Image back.gif
Example page