Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)
By Will Bontrager
2003-10-15
Reader Rating:

The Background Behind Sections of Text Content
Background color and images can be specified for standard HTML tags for text content, too. It is almost identical to the DIV and table style specifications, except no period is typed in front of the style. (The period indicates a custom class. Lack of a period indicates a style for a standard HTML tag.) Standard HTML tags for text content do not have the ability to be sized except for the amount of area the text itself requires.
To specify a background of yellow for H1 (header size 1) text and an image background for P (paragraph) text, put this in the HEAD section of your web page:
<style type="text/css">
<!--
H1 { background-color: yellow; }
P { background-image: url(image.jpg); }
-->
</style>
Now, in the following page copy, the header will have a yellow background and each paragraph will have an image as its background. Example:
<H1>My Header</H1>
<P>A paragraph.</P>
<P>Another paragraph.</P>
Image tiling and positioning are specified using the same specifications language as the class for DIV sections.
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
|