我工作的网站标题中有“两行”必须水平重复
和页脚，
我已经为两条线制作了背景重复图像
如何使“第二个背景重复图像”位置与“页脚 div”位置相同..
实际上我将顶部的两行作为一个“背景重复图像”...
HTML代码:
<body>
<div id="websiteContents">
<div id="header">
<div id="headerLine"></div>
contents
<div id="headerLine_down"></div>
</div>
vary contents
<div class="footer">
<a href="#">Home</a>
<a href="#">about</a>
<a href="#">contact us</a>
</div>
</div>
</body>
CSS 代码:
body {
background: url(../images/standard/repeat_header.png) #FFF repeat-x 0 165px;
}
#websiteContents {
width: 1150px;
margin: 0 auto;
}
#headerLine {
width: 1150px;
height: 4px;
background-color: #647193;
float: left;
margin-top: 14px;
}
#headerLine_down {
width: 1150px;
height: 9px;
background-color: #2B303E;
}
.footer {
width: 1150px;
background-color: #2A2F3D;
other styles...
}
网站太大了，如果你想要完整的代码我给你
谢谢大家
最佳答案
我想这对你有帮助
我改变了你的html结构
html
<div id="websiteContents">
<div id="header">
<div class="headerContainer">
<div id="headerLine"></div>
contents
<div id="headerLine_down"></div>
</div>
</div>
<div class="bodyContainer">
vary contents
</div>
<div class="footer">
<div class="footerContainer">
<a href="#">Home</a>
<a href="#">about</a>
<a href="#">contact us</a>
</div>
</div>
</div>
CSS
body {
background: url(../images/standard/repeat_header.png) #FFF repeat-x 0 165px;
}
body, html{
height:100%;
}
#websiteContents {
height:100%;
}
#headerLine {
width: 1150px;
height: 4px;
background-color: #647193;
float: left;
margin-top: 14px;
}
#headerLine_down {
width: 1150px;
height: 9px;
background-color: #2B303E;
}
.footer {
background-color: #2A2F3D;
height:100%;
}
.headerContainer{
width:1150px;
margin:0 auto;
}
.bodyContainer{
width:1150px;
margin:0 auto;
}
.footerContainer{
width:1150px;
margin:0 auto;
}
关于html - CSS:相对于元素的背景位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17040550/