Lặp lại hình ảnh nền CSS
Lặp lại nền CSS
Theo mặc định, thuộc background-image
tính lặp lại một hình ảnh theo cả chiều ngang và chiều dọc.
Một số hình ảnh chỉ nên được lặp lại theo chiều ngang hoặc chiều dọc, nếu không chúng sẽ trông kỳ lạ, như thế này:
Thí dụ
body
{
background-image: url("gradient_bg.png");
}
Nếu hình ảnh trên chỉ được lặp lại theo chiều ngang ( background-repeat: repeat-x;
), nền sẽ trông đẹp hơn:
Thí dụ
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Mẹo: Để lặp lại một hình ảnh theo chiều dọc, hãy đặtbackground-repeat: repeat-y;
CSS background-repeat: no-repeat
Chỉ hiển thị hình nền một lần cũng được thuộc background-repeat
tính chỉ định:
Thí dụ
Chỉ hiển thị hình nền một lần:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Trong ví dụ trên, hình nền được đặt ở cùng vị trí với văn bản. Chúng tôi muốn thay đổi vị trí của hình ảnh, để nó không làm xáo trộn văn bản quá nhiều.
Vị trí nền CSS
Thuộc background-position
tính được sử dụng để chỉ định vị trí của hình nền.
Thí dụ
Định vị hình nền ở góc trên cùng bên phải:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}