0


ヘッダーに「2行」があり、水平方向とフッターを繰り返す必要があるWebサイトに取り組んでいます.2行
の背景繰り返し画像をすでに作成しています

「2番目の背景リピート画像」の位置を「フッターdiv」の位置と同じにする方法..

実は一番上の2行を1つの「背景リピート画像」にしています…

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

スクリーンショット

Web サイトが大きすぎるので、完全なコードが必要な場合は、私が提供します

皆さん、ありがとうございました

4

2 に答える 2

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 に答える
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 に答える