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…
repeat: The image is repeated as much as needed to cover the whole background image painting area. The last image will be clipped if it doesn’t fit.no-repeat: The image is not repeatedspace: The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.round: As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room.
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;
}