Hình nền toàn trang với cuộn dọc

Question

Tôi đang cố tạo một trang có hình nền đáp ứng với kích thước màn hình của trình duyệt của bạn. Tuy nhiên, tôi cần nội dung theo hình ảnh đó sao cho nếu người đó cuộn xuống, hình nền sẽ kết thúc.

Thật khó để giải thích vì vậy tôi đã cố gắng để tạo ra một hình ảnh để làm cho nó rõ ràng hơn:

Answer 1

Hãy thử điều này Fiddle:

HTML:

<div class='image'></div> 
<div class='content'>Content</div> 

Sử dụng tuyệt đối định vị để làm cho hình nền có cùng kích thước với màn hình và đặt nội dung sau, với top trong số 100%:

body { 
    margin:0; 
} 
.image { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:green; 
    background-image:url('some-image.jpg'); 
    background-size:cover; 
} 
.content { 
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 100px; 
} 

Answer 2

Không cần position: absolute như tb11 đề xuất.

Bạn chỉ có thể đặt chiều cao của chế độ xem bằng cách sử dụng đơn vị chế độ xem hoặc bằng cách đặt chiều cao cho các phần tử html, body và hình ảnh.

Sử dụng vh-Demo và support chart:

body { margin: 0; } 
.image { 
    width:100vw; 
    height: 100vh; 
    background: green; 
    background-image: url('some-image.jpg'); 
    background-size: cover; 
} 

---

Nếu bạn không thể sử dụng vh, bạn sẽ phải thiết lập chiều cao của html và cơ thể yếu tố cũng vì vậy mà bạn có thể sử dụng phần trăm - Demo:

html, body, .image { height: 100%; } 
body { margin: 0; } 
.image { 
    width:100%; 
    background: green; 
    background-image: url('some-image.jpg'); 
    background-size: cover; 
}