##All elements go between these tags:

<style type="text/css">

</style>

###By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. 

<style type="text/css">
body
{
background-image:url('paper.gif');
background-color:#b0c4de;
}
</style>


###Repeat a background-image only vertically:

<style type="text/css">
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
background-color:#b0c4de;
}
</style>

###The background image will be repeated only horizontally

<style type="text/css">
body
{
background-image:url('paper.gif');
background-repeat:repeat-x;
background-color:#b0c4de;
}
</style>

###The background-image will not be repeated

<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-color:#b0c4de;
} 
</style>

###The position of the image is specified by the background-position property:

<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
background-color:#b0c4de;
}
</style>

###The background-image is fixed. Try to scroll down the pageand the image will remain at the fixes possition

<style type="text/css">
body 
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#b0c4de;
}
</style>

###Elements for fixed possition:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit

<style type="text/css">
body
{
margin-left:200px;
background:#5d9ab2 url('img_tree.png') no-repeat top left;
background-color:#b0c4de;
}
</style>


###Adding color to page elements

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

###Adding background to table data: NOTE:only in the transitional HTML versions.

td.abc {
width: 140px;
background: url(images/xyz.gif);
background-repeat: repeat-y;
background-color: #ffffff;
}

###OR you can do this: NOTE:only in the transitional HTML versions.

<td height="329" style="background-image:url(images/bckground.gif)">

<td height="329" style="background-image:url(images/bckground.gif);background-repeat:no-repeat;">


###To specify an image as the background for the DIV, several different methods can be used.
###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); }

###To print the image just once, not tiled, use

.divtest { background-image: url(image.jpg);
                   background-repeat: no-repeat; }

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

###To repeat the image across the top of the DIV section, use

.divtest { background-image: url(image.jpg);
           background-repeat: repeat-x; }


###To repeat the image along the left edge of the DIV section, use

###.divtest { background-image: url(image.jpg);
              background-repeat: repeat-y; }

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

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 pri