Thuộc tính background-repeat trong CSS
Thuộc tính background-repeat trong CSS xác định hướng lặp của hình nền.
Thuộc tính background-repeat có thể nhận giá trị:
repeat: sử dụng giá trị này làm hình nền được lặp theo cả hai trục dọc và ngang.
repeat-x: sử dụng giá trị này làm hình nền chỉ được lặp theo trục ngang.
repeat-y: sử dụng giá trị này làm hình nền chỉ được lặp theo trục dọc.
no-repeat: sử dụng giá trị này tức là hình nền không được lặp theo bất cứ trục nào.
Thuộc tính background-repeat có thể áp dụng cho:
Tất cả các phần tử HTML.
Cú pháp thuộc tính background-repeat trong DOM
object.style.backgroundRepeat = "bat ky gia tri nao o tren";
Ví dụ thuộc tính background-repeat trong CSS
Tốt nhất khi sử dụng thuộc tính background-repeat thì hình ảnh mà bạn đang sử dụng nên có kích thước nhỏ. Với các hình ảnh lớn, bạn có thể sử dụng giá trị no-repeat nếu bạn không muốn lặp hình nền. Trong trường hợp như vậy, hình nền của bạn sẽ không được lặp và chỉ được hiển thị một lần.
Theo mặc định, thuộc tính background-repeat có giá trị repeat. Ví dụ sau minh họa cách sử dụng thuộc tính background-repeat với giá trị repeat trong CSS.
<html>
<head>
<style>
body {
background-image: url("../css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Vi du ve gia tri mac dinh cua thuoc tinh background-repeat trong CSS.</p>
</body>
</html>
Kết quả là:
Ví dụ sau minh họa cách sử dụng thuộc tính background-repeat với giá trị repeat-x trong CSS để lặp hình nền theo trục ngang.
<html>
<head>
<style>
body {
background-image: url("../css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>background_trong_css_3.htm</>
</body>
</html>
Kết quả là:
Ví dụ sau minh họa cách sử dụng thuộc tính background-repeat với giá trị repeat-y trong CSS để lặp hình nền theo trục dọc.
<html>
<head>
<style>
body {
background-image: url("../css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Vi du ve gia tri repeat-y cua thuoc tinh background-repeat trong CSS.</>
</body>
</html>
Kết quả là:
Công cụ giáo viên (2048.VN)
Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free
Bài học CSS phổ biến khác tại vietjack.com:
Dành cho bạn
Công cụ giáo viên
- Tạo đề online từ PDF / Word
- Trộn nhiều mã đề, in Offline
- Giao bài online, Quản lí lớp học
