CSS Background Repeat

The background-repeat property in CSS is used to control the repetition of background images. You can set it to repeat the background image horizontally, vertically, both, or not at all.

Background Repeat Options

Here are the different values for the background-repeat property:

• repeat – The background image is repeated both horizontally and vertically. This is the default.
• repeat-x – The background image is repeated only horizontally.
• repeat-y – The background image is repeated only vertically.
• no-repeat – The background image is not repeated.
• space – The background image is repeated as much as possible without clipping. Extra space is distributed between the images.
• round – The background image is repeated and scaled to fill the space without clipping.

Examples

Repeat

The background image is repeated both horizontally and vertically (default behavior).

div {
    background-repeat: repeat;
}

Repeat-x

The background image is repeated only horizontally.

div {
    background-repeat: repeat-x;
}

Repeat-y

The background image is repeated only vertically.

div {
    background-repeat: repeat-y;
}

No Repeat

The background image is not repeated.

div {
    background-repeat: no-repeat;
}

Space

The background image is repeated as much as possible without clipping, with space distributed between images.

div {
    background-repeat: space;
}

Round

The background image is repeated and scaled to fill the space without clipping.

div {
    background-repeat: round;
}

Conclusion

The background-repeat property in CSS gives you control over how your background images are repeated. By using the different values, you can create various visual effects to enhance your web design.