LÀM THẾ NÀO ĐỂ - 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 đây hiển thị hình nền đáp ứng toàn màn hình (và một nửa màn hình):
Cách tạo 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 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 để căn giữa và chia tỷ lệ hình ảnh một cách hoàn hảo:
Lưu ý: Để đảm bảo rằng 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>:
Thí 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ình nền nửa trang:
Thí dụ
.bg {
height: 50%;
}