css backgrounds
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> |