CSS Background Attachment

Introduction to CSS

About Lesson

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;
}

This div has a repeating background image.

Repeat-x

The background image is repeated only horizontally.

div {
    background-repeat: repeat-x;
}

This div has a horizontally repeating background image.

Repeat-y

The background image is repeated only vertically.

div {
    background-repeat: repeat-y;
}

This div has a vertically repeating background image.

No Repeat

The background image is not repeated.

div {
    background-repeat: no-repeat;
}

This div has a non-repeating background image.

Space

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

div {
    background-repeat: space;
}

This div has a background image with space between repetitions.

Round

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

div {
    background-repeat: round;
}

This div has a scaled and repeating background image.

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.