Web Cơ Bản

Thuộc tính background-repeat trong CSS

Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:

1) Thuộc tính background-repeat trong CSS

- Thuộc tính background-repeat dùng để thiết lập "sự lặp lại của hình nền" cho phần tử HTML.

Ví dụ:

- Tôi có một tấm hình tên là flower.gif như sau:

- Và một phần tử với kích thước như sau:

- Tôi muốn dùng tấm hình flower.gif để làm hình nền cho phần tử. Tuy nhiên vì kích thước của tấm hình nhỏ hơn kích thước của phần tử, nên mặc định nó sẽ tự động được lặp lại để lấp đầy diện tích của phần tử:

- Từ đây, thuộc tính background-repeat dùng để thiết lập sự lặp lại của hình nền.

- Ví dụ: Dùng thuộc tính background-repeat để thiết lập hình nền chỉ lặp theo chiều ngang.

- Ví dụ: Dùng thuộc tính background-repeat để thiết lập hình nền chỉ lặp theo chiều dọc.

- Ví dụ: Dùng thuộc tính background-repeat để thiết lập hình nền không lặp lại.

2) Cách sử dụng thuộc tính background-repeat trong CSS

- Để sử dụng thuộc tính background-repeat, ta dùng cú pháp như sau:

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

- Ta thấy giá trị của thuộc tính background-repeat có thể được xác định bởi một trong sáu loại:

repeat

- Hình ảnh sẽ được lặp lại theo chiều ngang lẫn chiều dọc.

Xem ví dụ
repeat-x

- Hình ảnh chỉ lặp lại theo chiều ngang.

Xem ví dụ
repeat-y

- Hình ảnh chỉ lặp lại theo chiều dọc.

Xem ví dụ
no-repeat

- Hình ảnh không lặp lại.

Xem ví dụ
initial

- Sử dụng giá trị mặc định của nó.

- Lưu ý: Thuộc tính background-repeat của một phần tử sẽ có giá trị mặc định là repeat.

Xem ví dụ
inherit

- Kế thừa giá trị thuộc tính background-repeat từ phần tử cha của nó.

Xem ví dụ