background-repeat

by

The background-repeat property controls how a background image is repeated within an element.

It has four possible values:

  • repeat: The image is repeated both horizontally and vertically.
  • repeat-x: The image is repeated horizontally only.
  • repeat-y: The image is repeated vertically only.
  • no-repeat: The image is not repeated 1 at all.  

Basic Usage

.element {
    background-image: url("image.jpg");
    background-repeat: repeat; /* Replace with your desired value */
}

Examples

  • Repeating both horizontally and vertically:
.element {
    background-image: url("pattern.png");
    background-repeat: repeat;
}
  • Repeating horizontally only:
.element {
    background-image: url("horizontal-stripe.png");
    background-repeat: repeat-x;
}
  • Repeating vertically only:
.element {
    background-image: url("vertical-stripe.png");
    background-repeat: repeat-y;
}
  • Not repeating the image:
.element {
    background-image: url("centered-image.jpg");
    background-repeat: no-repeat;
}

Additional Considerations

  • Background Position: To control where the image starts within the element, use the background-position property.
  • Background Size: To adjust the size of the image, use the background-size property.
  • Background Attachment: To determine whether the image scrolls with the content or remains fixed, use the background-attachment property.

Tips

  • Experiment with different values to achieve the desired effect.
  • Consider the size and dimensions of your image and the element it’s applied to.
  • Combine background-repeat with other background properties to create more complex designs.