Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)
By Will Bontrager2003-10-10
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.
Tutorial Pages:
» Introduction
» Now, let's see what you can do with CSS!
» Background Color
» Tiled Image
» Image Not Repeated, With Exact Positioning
» Background Image Repeated Across the Top of the Web Page
» Background Image Repeated Along the Left of the Web Page
» Background Image Does Not Scroll When Web Page Scrolls
» An Application
Copyright 2004 Bontrager Connection, LLC
|
