CSS - background-repeat

Description:

background-repeat defines the directions in which a background image will be repeated (if any).

Possible Values:

repeat: Causes the background image to be repeated along both the horizontal and vertical axes.
repeat-x: Causes the background image to be repeated along the x axis.
repeat-y: Causes the background image to be repeated along the y axis.
no-repeat: Prevents the background image from being repeated at all.

Applies to:

All the HTML elements.

DOM Syntax:

object.style.backgroundRepeat="Any of the above values";

Example:

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>