Setting the Background Image Position
Description
The background-position property
tells browser where the background image should be located.
This is useful when image is not repeating.
Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w. j av a2 s . co m-->
background-image: url(http://www.java2s.com/style/download.png);
background-repeat: no-repeat;
background-position: 30px 10px;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>
Note
The code above tells the browser to draw the background image 30 pixels from the left edge and 10 pixels from the top edge.
It set the position using lengths, but you can also use the predefined values shown in the following list.
- top - Positions the image at the top edge.
- left - Positions the image at the left edge.
- right - Positions the image at the right edge.
- bottom - Positions the image at the bottom edge.
- center - Positions the image at the mid-point.
The first value controls the vertical position and can be top, bottom, or center.
The second value controls the horizontal position and can be left, right, or center.