<!DOCTYPE html>
<html>
<head>
<style>
#example1 { border: 2px solid black;
padding: 25px;
background: url("w3css.gif"); background-repeat: repeat;
}
#example2 { border: 2px solid black;
padding: 25px;
background: url("w3css.gif"); background-repeat: space;
}
#example3 { border: 1px solid black;
padding: 25px;
background: url("w3css.gif"); background-repeat: round;
}
</style>
</head>
<body>
<h2>background-repeat: repeat (default)</h2>
<p>Here, the background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default:</p>
<div id="example1">
<h3>Hello World!</h3>
</div>
<h2>background-repeat: space</h2>
<p>Here, the background-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.</p>
<div id="example2">
<h3>Hello World!</h3>
</div>
<h2>background-repeat: round</h2>
<p>Here, the background-image is repeated and squished or stretched, to fill the space (no gaps):</p>
<div id="example3">
<h3>Hello World!</h3>
</div>