CoverT 21: background-repeat Options

codeInteractive Code Example

The background-repeat property sets how background images are repeated. There are several options, each offering a slightly different result.

Here are a few useful options according to Mozilla…

Code

<h3>Repeat (default)</h3>
<div class="my-container"></div>

<h3>No Repeat</h3>
<div class="my-container no-repeat"></div>

<h3>Space</h3>
<div class="my-container space"></div>

<h3>Round</h3>
<div class="my-container round"></div>
.my-container {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  background-image: url('dot.png');
  background-color: grey;
}

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

.space {
  background-repeat: space;
}

.round {
  background-repeat: round;
}

Results

Repeat (default)

No Repeat

Space

Round