CSS background-repeat Property

The CSS background-repeat property settles if/how a background image will be repeated.

Demo:

Syntax:

background-repeat: repeat|repeat-x|repeat-y|no-repeat|space|round;

repeat (default) – the background image is repeated both vertically and horizontally (the last image will be clipped if it does not fit).

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 (the image will only be shown once).

space – the background-image is repeated as much as possible without clipping.

round – the background-image is repeated and squished or stretched to fill the space (no gaps).

Example:

Repeat a background image only horizontally:

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  border: 3px solid #333;
  width: 300px;
  height: 150px;
  background-image: url('https://lenadesign.org/wp-content/uploads/2021/06/icon.png');
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<div id="myDIV">
</div>

</body>
</html>

Output:

Enjoy coding!

Share this: