DANH MỤC: Nền và Viền

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ả

 

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

Biển học vô biên, quay đầu là dại!

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia