Web development

CSS background-repeat Property

CSS background-repeat Property

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



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).


Repeat a background image only horizontally:

<!DOCTYPE html>
#myDIV {
  border: 3px solid #333;
  width: 300px;
  height: 150px;
  background-image: url('');
  background-repeat: repeat-x;

<div id="myDIV">



Enjoy coding!

Read also:

CSS background-origin Property

CSS background-image Property

CSS Reference