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