Cascading Style Sheets (CSS); Backgrounds

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.

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; }



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