
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!
Read also:
CSS background-origin Property