CSS Background

This POST teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element:
 The background-color property is used to set the background color of an element.
 The background-image property is used to set the background image of an element.
 The background-repeat property is used to control the repetition of an image in the background.
 The background-position property is used to control the position of an image in the background.
 The background-attachment property is used to control the scrolling of an image in the background.
 The background property is used as a shorthand to specify a number of other background properties.

Set the Background Color
Following is the example, which demonstrates how to set the background color for an element.
<p style="background-color:yellow;">
This text has a yellow background color.
</p>

It will produce the following result:

Set the Background Image
<table style="background-image:url(/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>

Repeat the Background Image
The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for the background-repeat property if you don't want to repeat an image. In this case, the image will display only once.
By default, the background-repeat property will have a repeat value.

<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>

The following example which demonstrates how to repeat the background image
vertically.
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat vertically.
</td></tr>
</table>

The following example demonstrates how to repeat the background image horizontally.
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally.
</td></tr>
</table>

Set the Background Image Position
The following example demonstrates how to set the background image position 100
pixels away from the left side.
<table style="background-image:url(/images/pattern1.gif);
background-position:100px;">
<tr><td>
Background image positioned 100 pixels away from the LIFT
</td></tr>
</table>
The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.
<table style="background-image:url(/images/pattern1.gif);
background-position:100px 200px;">
<tr><td>
This table has background image positioned 100 pixels away from the left and 200 pixels from the top.
</td></tr>
</table>

Set the Background Attachment
Background attachment determines whether a background image is fixed or scrolls with the rest of the page.
The following example demonstrates how to set the fixed background image.
<p style="background-image:url(/images/pattern1.gif);
background-attachment:fixed;">
This parapgraph has fixed background image.
</p>
The following example demonstrates how to set the scrolling background image.
<p style="background-image:url(/images/pattern1.gif);
background-attachment:scroll;">
This parapgraph has scrolling background image.
</p>

Shorthand Property
You can use the background property to set all the background properties at once. For
example:
<p style="background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>