Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)

<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.

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.

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.

Introduction
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. Part 1 is linked from here.

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 here.

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).

Related Stories:

» Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)

» Cascading Style Sheets (CSS); Learning More

» Cascading Style Sheets (CSS); Getting Started