Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)
By Will Bontrager
2003-10-15
Reader Rating: 
The Background of Divisions of the Web Page, Within DIV Tags
Specifying a background for a DIV section of your web page is similar to specifying the background of the entire web page. Backgrounds specified for a DIV section will lie on top of the web page's background.
A DIV section is that portion of your web page in a DIV tag, i.e.:
<DIV>
Content of a DIV section.
</DIV>
Create a CSS class in the HEAD area of your page, like this:
<style type="text/css">
<!--
.divtest { background-color: yellow; }
-->
</style>
Now, when you create a DIV section in your web page with class divtest, the division's background will be yellow.
Example:
<DIV class="divtest">
<p>A paragraph.</p>
<img src="picture.jpg">
<p>Another paragraph.</p>
</DIV>
To specify an image as the background for the DIV, several different methods can be used. Each method requires changing the CSS class "divtest" in the HEAD area of your web page. Images, if they're too large for the DIV section, will have their top-left portion displayed to the size of the DIV section.
1. To tile the image, where the image is repeated
across the top and row by row until the entire
DIV background is covered, use
.divtest { background-image: url(image.jpg); }
2. To print the image just once, not tiled, use
.divtest { background-image: url(image.jpg);
background-repeat: no-repeat; }
3. To print the image just once, positioned in the
top-right corner of the DIV section, use
.divtest { background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: right top; }
Positioning of the image can be done in the many
ways that web page background images can be
positioned. See part 1 of this series.
4. To repeat the image across the top of the DIV
section, use
.divtest { background-image: url(image.jpg);
background-repeat: repeat-x; }
5. To repeat the image along the left edge of the DIV
section, use
.divtest { background-image: url(image.jpg);
background-repeat: repeat-y; }
6. To create a DIV section the exact dimensions of
the image, use (assuming an image 200 pixels high
and 400 pixels wide)
.divtest { height: 200;
width: 400;
background-image: url(image.jpg); }
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 1 of 2)
» Cascading Style Sheets (CSS); Learning More
» Cascading Style Sheets (CSS); Getting Started
|
