CSS background-repeat Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 46 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The background-repeat property in CSS is used to control how background images are repeated within an element. By default, a background image is repeated both horizontally and vertically, covering the entire area of the element. However, you can use the background-repeat property to change this behavior, specifying whether the image should repeat in one direction, both directions, or not at all.

💡 Syntax

The syntax for the background-repeat property is simple and can be applied to any element that supports background images.

Syntax

Copied

element {
  background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;
}

🎛️ Default Value

The default value of the background-repeat property is repeat, which means the background image will repeat both horizontally and vertically.

🏠 Property Values

Value	Description
repeat	The background image is repeated both horizontally and vertically (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, and the remaining space is distributed around the images.
round	The background image is repeated and rescaled to fill the space, ensuring that the image fits the area without clipping.

📄 Example

In this example, we'll demonstrate the different values of the background-repeat property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS background-repeat Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-image: url('your-image-url.jpg');
    }

    .repeat {
      background-repeat: repeat;
    }

    .repeat-x {
      background-repeat: repeat-x;
    }

    .repeat-y {
      background-repeat: repeat-y;
    }

    .no-repeat {
      background-repeat: no-repeat;
    }

    .space {
      background-repeat: space;
    }

    .round {
      background-repeat: round;
    }
  </style>
</head>
<body>
  <h1>CSS background-repeat Property Examples</h1>
  
  <h2>Repeat</h2>
  <div class="box repeat"></div>

  <h2>Repeat-X</h2>
  <div class="box repeat-x"></div>

  <h2>Repeat-Y</h2>
  <div class="box repeat-y"></div>

  <h2>No Repeat</h2>
  <div class="box no-repeat"></div>

  <h2>Space</h2>
  <div class="box space"></div>

  <h2>Round</h2>
  <div class="box round"></div>
</body>
</html>

🖥️ Browser Compatibility

The background-repeat property is widely supported across all modern browsers. This includes Chrome, Firefox, Safari, Edge, and Opera. It has been a standard feature in CSS for a long time, so you can confidently use it without worrying about browser compatibility issues.

🎉 Conclusion

The background-repeat property is a versatile tool in CSS that allows you to control how background images are repeated within an element. Whether you want to tile an image across the entire background, repeat it in just one direction, or not repeat it at all, this property gives you the flexibility to achieve the desired visual effect. Experiment with the different values and see how they can enhance the design of your web pages.