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

cssbộ chọn {
  background-image: url(đường dẫn tới ảnh);
}

cssbộ chọn {
  background-image: none;
}

Giá trị

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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Xem thêm