誰か助けてくれませんか？ここstackoverflow.comとGoogleで1週間検索しましたが、問題の解決策が見つかりませんでした。私はCSSの専門家ではなく、おそらく何か間違ったことをしたことを認めているので、htmlファイルとcssファイルの両方を変更したいと思っています。
固定された（絶対位置にある）ヘッダー、フッター、サイドバーを備えた流動的なレイアウトがあります。コンテンツは、垂直スクロールバーを備えた柔軟なdivにあります。スクロール可能なコンテンツを含むdivの中央に固定された背景画像を配置し、メインコンテンツの最後に静的なdivを配置したいと思います。残念ながら、背景画像に使用するdivに関係なく、背景画像は包含ボックスではなくビューポートの中央に配置されます。
コードは次のとおりです。
HTML
<body>
<div class="container">
<div class="sus">
<!--Header-->
</div>
<div class="totul">
<div class="coloana">
<!--Sidebar-->
</div>
<div class="dreapta"> <!--Here I want the fixed centered background image-->
<div class="continut">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />
asdfsad ff asdf asdfasd
<p>Lorem ipsum dolor sit amet, ullamco laboris nisi duis aute irure dolor. Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ullamco laboris nisi consectetur adipisicing elit. Sunt in culpa duis aute irure dolor quis nostrud exercitation. Eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore ut labore et dolore magna aliqua. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore ut aliquip ex ea commodo consequat. Quis nostrud exercitation eu fugiat nulla pariatur. Mollit anim id est laborum. Duis aute irure dolor velit esse cillum dolore consectetur adipisicing elit. Qui officia deserunt quis nostrud exercitation sed do eiusmod tempor incididunt. Ut enim ad minim veniam, consectetur adipisicing elit, excepteur sint occaecat. Cupidatat non proident, lorem ipsum dolor sit amet, mollit anim id est laborum. Sunt in culpa in reprehenderit in voluptate duis aute irure dolor. Ullamco laboris nisi eu fugiat nulla pariatur. Ut enim ad minim veniam, velit esse cillum dolore excepteur sint occaecat. Duis aute irure dolor ut aliquip ex ea commodo consequat. Qui officia deserunt. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Ullamco laboris nisi excepteur sint occaecat ut labore et dolore magna aliqua. Cupidatat non proident, mollit anim id est laborum. Velit esse cillum dolore lorem ipsum dolor sit amet, ut enim ad minim veniam. Ullamco laboris nisi eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Mollit anim id est laborum. Duis aute irure dolor consectetur adipisicing elit. Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt velit esse cillum dolore in reprehenderit in voluptate. Ut labore et dolore magna aliqua. Excepteur sint occaecat eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt mollit anim id est laborum. Ut enim ad minim veniam, velit esse cillum dolore lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Qui officia deserunt ut labore et dolore magna aliqua. Ullamco laboris nisi. Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Consectetur adipisicing elit, in reprehenderit in voluptate cupidatat non proident. Duis aute irure dolor ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt qui officia deserunt ut enim ad minim veniam. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Velit esse cillum dolore excepteur sint occaecat. Ullamco laboris nisi ut aliquip ex ea commodo consequat. Quis nostrud exercitation in reprehenderit in voluptate ut enim ad minim veniam. Mollit anim id est laborum. Lorem ipsum dolor sit amet, sunt in culpa cupidatat non proident. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, lorem ipsum dolor sit amet. Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Duis aute irure dolor.</p>
</div>
<!--Next block appear only when all the content above was scrolled down-->
<div class="parteneri">End of the main content</div>
</div>
</div>
<div class="subsol">Footer</div>
</div>
</body>
CSS
@charset "utf-8";
body {
background-color:#CCC;
margin:0px;
padding:0px;
color: #006;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 100%;
background-attachment: fixed;
background-image: url(imagini/fundal.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.container {
min-width:800px;
max-width: 1600px;
min-height: 300px;
text-align: justify;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px auto;
padding: 0px;
}
.sus {
background-color:#CCC;
background-attachment: fixed;
background-image: url(mici/antet-fundal.jpg);
background-repeat: no-repeat;
background-position: center top;
overflow: hidden;
text-align: center;
margin: 0px;
padding: 0px;
height: 200px;
width: 100%;
position: absolute;
top: 0px;
}
.totul {
overflow: hidden;
padding: 0px;
width: 100%;
margin: 0px;
position: absolute;
top: 200px;
bottom: 10px;
}
.coloana {
background-image: url(col/umplere.png);
background-repeat: repeat-y;
background-position: center top;
text-align: center;
overflow: hidden;
height: 100%;
width: 250px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
}
.dreapta {
margin: 0px;
overflow:auto;
overflow-x:hidden;
height: 100%;
padding: 0px;
text-align: center;
position: absolute;
right: 1px;
left: 250px;
vertical-align: middle;
border-right: 1px solid #999;
background-color: #09F;
background-attachment: fixed;
background-image: url(imagini/sigla_map.jpg);
background-repeat: no-repeat;
background-position: center center;
z-index: 0;
}
.continut {
padding: 15px;
margin: auto;
width: 97%;
text-align: justify;
z-index: 10;
}
.parteneri {
background-color: #999;
height: 70px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: left;
}
.subsol {
width:100%;
height:10px;
background-color:#CC8C60;
overflow: hidden;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
color: #F1DFD1;
}
この謎を解くまで眠れません。ご協力ありがとうございました。