0

我正在处理标题中“两行”必须重复水平
和页脚的网站，
我已经为这两行制作了背景重复图像

如何使“第二个背景重复图像”位置与“页脚 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...
}

截图

网站太大了，如果你想要完整的代码，我会给你

谢谢你们

4

2 回答 2

0

我想这会对你有所帮助

我改变了你的 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;  
}
于 2013-06-11T10:02:40.493 回答
0

我仍然不确定，如果我理解了......但你有这样的想法吗？

jsFiddle 演示

CSS

.footer {
    width: 1150px;
    background-color: #2A2F3D;
    background-image:url('http://www.w3schools.com/cssref/smiley.gif');
    background-repeat:no-repeat;
    background-position: left top;
    height:100px;
}
于 2013-06-11T09:44:00.520 回答