CSS Background Repeat

CSS background-repeat

By default,background-image The property repeats the image in both horizontal and vertical directions.

Some images are only suitable for repeating horizontally or vertically, otherwise they will look strange, as shown below:

Example

body {
  background-image: url("gradient_bg.png");
}

Try It Yourself

If the image above is only repeated horizontally (background-repeat: repeat-x;), then the background will look better:

Example

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Try It Yourself

Tip:If you need to repeat the image vertically, please set background-repeat: repeat-y;.

CSS background-repeat: no-repeat

background-repeat The attribute can also specify that the background image is displayed only once:

Example

The background image is displayed only once:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

Try It Yourself

In the above example, the background image is placed at the same position as the text. We want to change the position of the image so that it does not interfere with the text too much.

CSS background-position

background-position The attribute is used to specify the position of the background image.

Example

Place the background image at the upper right corner:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Try It Yourself