Để 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:
- Thuộc tính background-image trong CSS
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.
- 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ụ |
Background-repeat là thuộc tính hỗ trợ background-image, nó cho phép chỉ định ảnh được lặp theo hướng nào hoặc đơn giản không lặp trên một đối tượng.
Ví dụ minh họa: Một ảnh nền cho thẻ được lặp theo chiều ngang có nền trắng
body{ background-image:url["logo.png"]; background-color:#fff; background-repeat:repeat-x; } |
Chạy thử với trình
Soạn thảo css online
Định nghĩa và cách sử dụng
Mặc định một background-image được lặp đi lặp lại cả theo chiều dọc và chiều ngang.
Mẹo: Các hình nền được đặt theo các thuộc tính background-position. Nếu không có background-position được quy định, các hình ảnh luôn được đặt ở góc trên bên trái của phần tử.
| repeat |
| Không |
| Không. Tìm hiểu về Thuộc tính Animatable |
| CSS1 |
| object.style.backgroundRepeat=”repeat-x” |
Trình duyệt hỗ trợ Background-repeat
Các con số trong bảng dưới đây xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ các thuộc tính.
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Lưu ý: Trình duyệt IE8 trở về trước không hỗ trợ background-repeat trên một phần tử, các ảnh nền bạn nên sử dụng ảnh jpg hoặc ảnh gif,png có màu nền. Các ảnh không có màu nền sẽ bị lỗi hiển thị.
Cú pháp CSS Background-reapeat
background-repeat:repeat|repeat-x|repeat-y|no-repeat|initial|inherit; |
Giá trị thuộc tính
| repeat | Đây là giá trị mặc định. Chỉ định lặp ảnh nền theo chiều dọc và ngang | |
| repeat-x | Những hình ảnh nền sẽ được lặp theo chiều ngang | |
| repeat-y | Những hình ảnh nền sẽ được lặp theo chiều dọc | |
| no-repeat | Ảnh nền sẽ không được lặp | |
| initial | Đặt thuộc tính này là giá trị mặc định. | |
| inherit | Kế thừa các thuộc tính này từ phần tử cha của nó |
» Trở về xem bài học CSS online, hướng dẫn học CSS
Tác giá: Hoàng Luyến
Trang chủ
Thuộc tính Background-repeat trong CSS
Đánh giá bài viết