Hướng dẫn how do you cover a background image in html? - làm thế nào để bạn che một hình nền trong html?

Thí dụ

Chỉ định kích thước của hình ảnh nền với "tự động" và trong pixel:

#example1 {& nbsp; Bối cảnh: URL (Núi.jpg); & nbsp; Bối cảnh lặp lại: không lặp lại; & nbsp; Kích thước nền: Tự động; }
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {& nbsp; Bối cảnh: URL (Núi.jpg); & nbsp; Bối cảnh lặp lại: không lặp lại; & nbsp; Kích thước nền: 300px 100px;}
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Thuộc tính background-size chỉ định kích thước của hình ảnh nền.

Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: cú pháp từ khóa ("tự động", "bìa" và "chứa"), cú pháp một giá trị (đặt chiều rộng của hình ảnh (chiều cao trở thành "tự động"), Cú pháp hai giá trị (giá trị thứ nhất: chiều rộng của hình ảnh, giá trị thứ hai: chiều cao) và cú pháp nhiều nền (được phân tách bằng dấu phẩy).

Đưa ra bản chạy thử ❯

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

CSS Cú pháp

Kích thước nền: Tự động | Độ dài | Bìa | chứa | ban đầu | kế thừa;

Giá trị tài sản

trải ra

Thí dụ

Thay đổi kích thước hình nền để che toàn bộ thùng chứa, ngay cả khi nó phải kéo dài hình ảnh hoặc cắt một chút ra khỏi một trong các cạnh

Lưu trữ
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Thay đổi kích thước hình nền để đảm bảo hình ảnh được hiển thị đầy đủ
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng
  background: url(img_tree.gif), url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain, cover;
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Thuộc tính background-size chỉ định kích thước của hình ảnh nền.

Tìm hiểu cách tạo một hình nền trang đầy đủ với CSS.

Hình ảnh toàn trang

Tìm hiểu cách tạo một hình ảnh nền bao gồm toàn bộ cửa sổ trình duyệt. Ví dụ sau đây cho thấy hình ảnh nền đáp ứng toàn màn hình (và nửa màn hình):

Demo - Hình nền toàn trang

Demo - Hình ảnh nền nửa trang

Cách tạo hình ảnh chiều cao đầy đủ

Sử dụng một phần tử container và thêm hình ảnh nền vào thùng chứa với height: 100%. Mẹo: Sử dụng 50% để tạo hình nền nửa trang. Sau đó sử dụng các thuộc tính nền sau để trung tâm và mở rộng hình ảnh một cách hoàn hảo:Tip: Use 50% to create a half page background image. Then use the following background properties to center and scale the image perfectly:

Lưu ý: Để đảm bảo rằng hình ảnh bao gồm toàn bộ màn hình, bạn cũng phải áp dụng height: 100% cho cả hai và: To make sure that the image covers the whole screen, you must also apply height: 100% to both and :

Thí dụ

cơ thể, html {& nbsp; & nbsp; chiều cao: 100%;}
  height: 100%;
}

.bg {& nbsp; / * Hình ảnh được sử dụng */& nbsp; Hình ảnh nền: URL ("img_girl.jpg");
  /* The image used */
  background-image: url("img_girl.jpg");

& nbsp; / * Chiều cao đầy đủ */& nbsp; Chiều cao: 100%;
  height: 100%;

& nbsp; / * Trung tâm và mở rộng hình ảnh đẹp */& nbsp; Định vị nền: Trung tâm;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Hãy tự mình thử »

Hình nền nửa trang:

Làm cách nào để đặt một hình ảnh lên trên nền trong HTML?

Làm cách nào để làm cho nền của một hình ảnh trong suốt trong HTML?