|
 Cascading Style Sheets (CSS); Backgrounds (part 2 of
2)
By
William
Bontrager
Part 1 focused on the many ways to specify web page
backgrounds with CSS. This part 2 addresses these subjects:
1. The background of divisions of the web page, within DIV tags.
2. The background of tables.
3. The background behind sections of text content.
4. The background behind INPUT and TEXTAREA form elements.
5. The background behind ordered and unordered lists.
This part 2 supposes you are familiar with
part 1.
Without that familiarity, especially if you are a novice with CSS, part 2
can be confusing.
Like part 1, the CSS examples in part 2 are provided in the format used when
the styles are defined in the HEAD area of a web page. For site-wide
implementation, you can use an external file for the same effects.
See previous articles of the "Cascading Style Sheets (CSS)" series, "Getting
Started" and "Learning More," for more information about those two methods
of defining CSS styles. The articles are linked from
http://willmaster.com/possibilities/archives/
Netscape 4.# does not comply with all CSS rules the way some other browsers
do. To see how your page appears in that browser, download it and use it
for testing. Netscape 4.# won't position background images any place other
than top left, for example. And background colors and images behind blocks
of text extend only as far as the longest line (most browsers extend the
background to the right margin).
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); }
The Background of Tables
Background color and images can be specified for tables, almost identical
in method to specifying backgrounds for DIV sections. For testing, create
a CSS class in the HEAD area of your page, like this:
<style type="text/css">
<!--
.tabletest { background-image: url(image.jpg); }
-->
</style>
Now, when you create a table in your web page with class "tabletest", the
table's background will be whatever you specified for that class. Example:
<table class="tabletest">
<tr>
<td>
Table data cell content here.
</td>
</tr>
</table>
Image tiling and positioning, and background color styles are specified using
the same specifications language as the class for DIV sections.
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.
The Background Behind INPUT and TEXTAREA Form Elements
The background of form INPUT and TEXTAREA fields can be a specific color
or an image. To make all INPUT areas yellow and put an image in the TEXTAREA
field, put this in the HEAD section of your web page:
<style type="text/css">
<!--
INPUT { background-color: yellow; }
TEXTAREA { background-image: url(image.jpg); }
-->
</style>
Now, all INPUT and TEXTAREA fields will contain the background you specified.
Example:
<form>
Your Name:
<INPUT type="text">
Narrative:
<TEXTAREA cols="11" rows="5"></TEXTAREA>
<INPUT type="submit">
</form>
Because the submit button is also an INPUT field, it will have the same
background as text input fields. If you prefer to have the background of
the submit button be blue (for example, it could be any color or even an
image), create a custom class and then specify that style for the submit
button.
Example for the HEAD section:
<style type="text/css">
<!--
INPUT { background-color: yellow; }
TEXTAREA { background-image: url(image.jpg); }
.special { background-color: blue; }
-->
</style>
Example form:
<form>
Your Name:
<INPUT type="text">
Narrative:
<TEXTAREA cols="11" rows="5"></TEXTAREA>
<INPUT class="special" type="submit">
</form>
The Background Behind Ordered and Unordered Lists
The backgrounds of ordered (OL) and unordered lists (UL), or each individual
list item (LI), are specified using the same specifications language as the
class for DIV sections.
If specifying an image for the background, the image will be behind the entire
list if specified for UL or OL tags. However, if specified for LI, the image
will be repeated behind each individual list item.
If UL and OL are specified, and LI, too, then the browser will print the
LI background over the UL and OL background for each individual list item.
Here are examples for the HEAD area:
<style type="text/css">
<!--
LI { background-color: yellow; }
UL { background-image: url(image.jpg);
background-repeat: no-repeat; }
OL { background-image: url(image.jpg); }
-->
</style>
And, example lists:
<ul>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ul>
<ol>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ol>
In the above lists, the list items have paragraph spacing. The area taken
up with each list as a whole will contain the specified background image.
The list items will have a yellow background, which covers the image wherever
the list item text is printed.
Now you have a lot of tools related to using background colors and images
to help you design awesome web pages.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee. |
|
Web
Development
