CSS Part 4

Setting Backgrounds using CSS 

This tutorial will teach you how to set backgrounds of various HTML elements. You can set 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 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> 

This will produce following result: 

This text has a yellow background color.

Set the background image: 

Following is the example which demonstrates how to set the background image for an element. 

<table style="background-image:url(/images/pattern1.gif);"> 

<tr>

<td> This table has background image set. </td>

</tr> 

</table>

Repeat the background image: 

Following is the example which demonstrates how to repeat the background image if image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once. 

 

By default background-repeat property will have 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>

Following is the 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>

Following is the example which 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: 

Following is the example which 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 left. </td>

</tr> 

</table> 

Following is the example which 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. 

Following is the example which 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>

Following is the example which 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>