BASIC TO ADVANCE

Thuộc tính backgorund-repeat trong CSS

Cú Pháp

-Thuộc tính Background-repeate có tác dụng thiết lập xem nền ảnh có được lặp lại hay không và lặp như thế nào.

Cú Pháp:

background-repeat: repeat|repeat-x|repeat-y|no-repeat;

Trong đó, các giá trị sẽ có các chức năng tương ứng như sau:

  • repeat-x: Chỉ lặp lại hình ảnh theo chiều ngang.
  • repeat-y: Chỉ lặp lại hình ảnh theo chiều dọc.
  • repeat: Lặp lại hình ảnh theo cả hai chiều. Đây là thuộc tính mặc định.
  • no-repeat: Không lặp hình ảnh.

Ví Dụ

VD1: Lặp hình ảnh theo chiều ngang.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: repeat-x;
}

Xem Kết Quả

VD2: Lặp hình ảnh theo chiều dọc.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: repeat-y;
}

Xem Kết Quả

VD3: Lặp hình ảnh theo cả 2 chiều ngang và dọc.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: repeat;
}

Xem Kết Quả

VD4: Không lặp hình ảnh.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: no-repeat;
}

Xem Kết Quả

 

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

0 Comments

Bài viết chưa có ai bình luận, hãy là người đầu tiên đi bạn!

Bình luận

Captcha