Lặp lại nền CSS

CSS background-repeat

Mặc định,background-image Thuộc tính lặp lại hình ảnh theo cả hướng ngang và dọc.

Một số hình ảnh chỉ nên được lặp lại theo hướng ngang hoặc dọc, nếu không chúng sẽ trông kỳ lạ như sau:

Example

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

Try It Yourself

Nếu hình ảnh trên chỉ được lặp lại theo hướng ngang (background-repeat: repeat-x;) thì nền sẽ trông tốt hơn:

Example

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

Try It Yourself

Lưu ý:Nếu cần lặp lại hình ảnh theo chiều dọc, hãy thiết lập 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 in the same position as the text. We want to change the position of the image so that it does not interfere too much with the text.

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