Tôi muốn tạo bố cục nơi tôi muốn hiển thị hình ảnh ở bên trái và nội dung ở bên phải. Hình ảnh phải được giữ nguyên khi nội dung cuộn.Cố định nền div
Các css Tôi đang sử dụng:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Rất nhiều thời gian trên trang web này và tôi đã hiểu rằng background-attachment: fixed vị trí hình ảnh trong toàn bộ khung nhìn chứ không phải phần tử được áp dụng cho.
Câu hỏi của tôi là làm thế nào để tôi tạo ra loại bố cục đó?
Tôi không muốn đặt hình ảnh đó làm hình nền, như thể cửa sổ được thay đổi kích thước, nó có thể bị ẩn. Tôi muốn thanh cuộn xuất hiện nếu kích thước cửa sổ nhỏ hơn 900px (chiều rộng trang của tôi) để hình ảnh có thể được xem mọi lúc.
Điều đó xảy ra với mã này, tuy nhiên tôi muốn hình ảnh bắt đầu ở phần tử của tôi thay thế.
Tôi làm cách nào để thực hiện việc này ??
Cảm ơn trước :)
được sửa đổi:
tôi lấy những lời khuyên và thêm một position: fixed tài sản để # chính-hình ảnh. Sử dụng HTML và CSS như được hiển thị ở trên. Bây giờ, tôi cũng muốn sửa tiêu đề sao cho nó không di chuyển. Về cơ bản, chỉ phần nội dung của tôi sẽ cuộn. Tuy nhiên, nếu tôi thêm một vị trí: cố định vào tiêu đề, # hình ảnh chính và #content của tôi bây giờ nằm trên đầu trang của tiêu đề của tôi. Nếu tôi thêm một lề trên: 150px (vì chiều cao tiêu đề của tôi là 150px) vào # hình ảnh chính, nó hoạt động tốt và di chuyển xuống một cách thích hợp. Tuy nhiên, nếu tôi thêm lề trên: 150px vào # nội dung, tiêu đề của tôi sẽ di chuyển xuống 150px và vẫn nằm trên đầu trang #content của tôi. Ai đó có thể giải thích tại sao điều này xảy ra? Cảm ơn bạn trước :)
Bạn có thể muốn repost chỉnh sửa của bạn như là một câu hỏi mới. –