CSS: Backgrounds - Positioning the Background Image
(Page 4 of 5 )
You can position the background image using the background-position property, like this:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('2.png'); background-repeat:no-repeat;background-position:center;
}
</style>
</head>
<body>
</body>
</html>
The values at which you can set the position are: top left, top center, top right, center left, center right, center center, bottom left, bottom center, and bottom right.
You can also position the image using the x% and y%, in this manner:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('2.png'); background-repeat:no-repeat;background-position:30% 20%
}
</style>
</head>
<body>
</body>
</html>
This works by setting the first value (%x) as the horizontal position, and the second value (%y) as the vertical position.
You can also set the image position using pixels by relying on the xpos, ypos value:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('2.png'); background-repeat:no-repeat;background-position:70px 120px;
}
</style>
</head>
<body>
</body>
</html>
Again, the xpos represents horizontal and ypos represents vertical.
Next: Text in CSS >>
More Style Sheets Articles
More By James Payne
