Copyright © tutorialspoint.com

# 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

Copyright © tutorialspoint.com