Cách thực hiện - Hình ảnh toàn trang
Tìm hiểu cách tạo hình nền toàn trang bằng CSS.
Hình ảnh toàn trang
Tìm hiểu cách tạo hình nền bao phủ toàn bộ cửa sổ trình duyệt. Ví dụ sau hiển thị hình nền phản hồi toàn màn hình (và nửa màn hình):
Cách tạo một hình ảnh có chiều cao đầy đủ
Sử dụng phần tử vùng chứa và thêm hình nền vào vùng chứa có 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 để căn giữa và chia tỷ lệ hình ảnh một cách hoàn hảo:
Lưu ý: Để đảm bảo hình ảnh bao phủ toàn bộ màn hình, bạn cũng phải áp dụng height: 100%
cho cả <html> và <body>:
Ví dụ
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Hãy tự mình thử »Hình nền nửa trang: