0
0
CSSmarkup~5 mins

Background repeat in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Background repeat controls how a background image repeats across an element. It helps you fill space or create patterns.

When you want a small image to cover the entire background by repeating it.
When you want a background image to appear only once without repeating.
When you want the image to repeat only horizontally or vertically.
When you want to create a pattern effect using a repeated image.
When you want to stop the background image from repeating to keep it clean.
Syntax
CSS
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;
repeat repeats the image both horizontally and vertically.
no-repeat shows the image only once.
Examples
Repeats the background image both horizontally and vertically to fill the area.
CSS
background-repeat: repeat;
Shows the background image only once without repeating.
CSS
background-repeat: no-repeat;
Repeats the background image only horizontally.
CSS
background-repeat: repeat-x;
Repeats the background image only vertically.
CSS
background-repeat: repeat-y;
Sample Program

This example shows a box with a small square background image repeated only horizontally across the box. The background color is light blue to highlight the area.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Background Repeat Example</title>
  <style>
    .box {
      width: 15rem;
      height: 10rem;
      border: 2px solid #333;
      background-image: url('https://via.placeholder.com/50');
      background-repeat: repeat-x;
      background-color: #eef;
      margin: 2rem auto;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <h1>Background Repeat: repeat-x</h1>
      <div class="box" aria-label="Box with background image repeated horizontally"></div>
      <p>The small square image repeats only horizontally inside the box.</p>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use background-repeat: no-repeat; to show the image only once.

Try changing repeat-x to repeat-y to see vertical repetition.

Background images should have good contrast with background color for visibility.

Summary

Background repeat controls how background images fill an area.

You can repeat images horizontally, vertically, both, or not at all.

It helps create patterns or keep backgrounds clean and simple.