有人会帮忙吗？我在 stackoverflow.com 和 Google 上搜索了一周，但没有找到解决问题的方法。你可以猜到我不是 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;
}
在我解开这个谜之前，我无法入睡。谢谢您的帮助。