Lặp lại hình nền CSS
Lặp lại nền CSS
Theo mặc định, thuộc tính background-image
lặp lại 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 lạ, như thế này:
Nếu hình ảnh trên chỉ được lặp lại theo chiều ngang ( background-repeat: repeat-x;
), nền sẽ đẹp hơn:
Ví dụ
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Hãy tự mình thử » Mẹo: Để lặp lại hình ảnh theo chiều dọc, hãy đặt background-repeat: repeat-y;
Lặp lại nền CSS: không lặp lại
Chỉ hiển thị hình nền một lần cũng được chỉ định bởi thuộc tính background-repeat
:
Ví dụ
Chỉ hiển thị hình nền một lần:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Hãy tự mình thử »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 tính background-position
được sử dụng để chỉ định vị trí của hình nền.
Ví dụ
Đặt hình nền ở góc trên bên phải:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Hãy tự mình thử »Thuộc tính vị trí và lặp lại nền CSS
Property | Description |
---|---|
background-position | Sets the starting position of a background image |
background-repeat | Sets how a background image will be repeated |