Tutorials Point


  CSS Beginners
  CSS Advanced
  CSS References
  CSS Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Setting Backgrounds using CSS


previous next AddThis Social Bookmark Button


Advertisements

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.

To Become more comfortable - Do Online Practice

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>

To Become more comfortable - Do Online Practice

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>

To Become more comfortable - Do Online Practice

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>

To Become more comfortable - Do Online Practice

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>

To Become more comfortable - Do Online Practice

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>

To Become more comfortable - Do Online Practice

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>

To Become more comfortable - Do Online Practice

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>

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements