Copyright © tutorialspoint.com

CSS - background-repeat

previous next


Advertisements

Description:

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

Possible Values:

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


previous next

Copyright © tutorialspoint.com