Question

我正在使用标题中的网站＆＃34;两行＆＃34;必须水平重复
和页脚，
我已经为这两行做了背景重复

如何制作＆＃34;第二背景重复图像＆＃34;位置与＆＃34; footer div＆＃34;相同职位..

实际上我将顶部的两条线设为一个＆＃34;背景重复图像＆＃34; ...

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...
}

The Screenshot

网站太大，所以如果你想要我将给你的完整代码

谢谢大家

Answer 1

我仍然不确定，如果我理解......但你认为这样的事情吗？

jsFIddle demo

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;
}

Answer 2

我认为这会对你有帮助

我更改了你的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;  
}

CSS：相对于元素的背景位置

2 个答案: