Thuộc tính background-image
Thuộc tính background-image thiết lập ảnh nền
cho phần tử. Mặc định, ảnh sẽ lặp lại bằng các bản sao
của nó để lấp đầy toàn bộ khối, tuy nhiên,
hành vi này có thể hủy bỏ bằng cách sử dụng thuộc tính
background-repeat.
Cú pháp
bộ chọn {
background-image: url(đường dẫn tới ảnh);
}
bộ chọn {
background-image: none;
}
Giá trị
| Giá trị | Mô tả |
|---|---|
url |
Đường dẫn tới tập tin ảnh. Tên ảnh có thể đặt trong dấu ngoặc kép, ngoặc đơn hoặc không cần dấu ngoặc. |
none |
Hủy bỏ ảnh nền cho phần tử. |
Giá trị mặc định: none.
Ví dụ
Thiết lập ảnh nền bằng background-image,
và cấm lặp lại nó bằng thuộc tính
background-repeat:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Ví dụ
Không có background-repeat, ảnh nền
sẽ lấp đầy toàn bộ khối:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Ví dụ
Có thể đồng thời thiết lập ảnh nền
và thiết lập màu nền bằng background-color.
Trong trường hợp này, ở những chỗ không có ảnh
nền - sẽ hiển thị màu nền:
<div id="elem"></div>
#elem {
background-color: orange;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Xem thêm
-
thuộc tính
background,
là một thuộc tính viết tắt cho các thuộc tính nền