background-position: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The background-position property specifies the position of a background image.


div {
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">

div {
width: 70%;
height: 200px;
margin: 20px 0;
background-color: #ffffff;
background-image: url(image/back.gif);
color: red;
}

#example1 {
background-repeat: no-repeat;
background-position: center;
}
#example2 {
background-repeat: repeat-x;
background-position: center bottom;
}

</style>

</head>
<body>

<div id="example1"> The center position</div>
<div id="example2">The center bottom position</div>

</body>
</html>
Output
The center position
The center bottom position

Background Image back.gif