Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)
By Will Bontrager
2003-10-10
Reader Rating: 
Image Not Repeated, With Exact Positioning
This will print the background just once, placing it in
the top-left corner of the web page.
<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
}
-->
</style>
To position the image in a place other than the top-left corner, use the background-position label. For example, this will print the background image at the right-top of the web page.
<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: right top;
}
-->
</style>
The words you can use for positioning are:
top bottom left right center
Note that the above words apply to the entire web page, not just the browser window. Thus, "bottom" means the bottom of the page, not the bottom of the window.
Positioning can also be specified by distance measurement and by percentages.
This style will place the top left corner of the image 400 pixels in from the left page margin and 100 pixels down from the top page margin.
<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 400px 100px;
}
-->
</style>
And this style will calculate the distance 10% from the left and 20% from the top.
<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10% 20%;
}
-->
</style>
Calculation is done using both the dimensions of the page and the dimensions of the image, the same percentage of each. The point 10% in from the left of the image will be placed at the point 10% from the left of the web page. And the point 20% from the top of the image will be placed 20% from the top of the web page. It can be a hard concept to grasp without a drawing. But try it, specifying different percentages until you gain an experiential understanding.
Copyright 2004 Bontrager Connection, LLC
If you found this article interesting, you may want to read these as well:
» Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)
» Cascading Style Sheets (CSS); Learning More
» Cascading Style Sheets (CSS); Getting Started
|
