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>

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