0

私の html ページには、上部にタイトルとメニューがあり、メニューの下にコンテンツ セクションがあり、下部にフッターがあります。フッターは、コンテンツのサイズに関係なく、常にウィンドウの下部にある必要があります (コンテンツがウィンドウよりも高い場合を除きます。この場合、フッターはコンテンツの下にある必要があります)。これを実装するマークアップと CSS ルールがあります (以下)。

しかし、コンテンツとフッターの上に背景画像も表示する必要があります。つまり、画像は画面全体をカバーする必要がありますが、タイトル/メニュー領域はカバーする必要があります。これを達成する方法がわかりません。以下のコード (およびhttp://jsfiddle.net/EGj54/の jsfiddle ) では、背景をページ全体に添付しましたが、コンテンツとフッターのみに表示したいと考えています。

誰か助けてくれませんか？

<div id="main">
    <div id="navbar">
        <div id="caption"><span>Test</span></div>
        <ul id="sections">
            <li><span>current</span></li>
            <li><a href="">next</a></li>
        </ul>
    </div>
    <div id="content">content</div>
    <div class="push"></div>
</div>
<div id="footer">footer</div>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
ul {
    list-style-type: none;
}
ul li {
    display: inline;
}
#caption {
    font-weight: bold;
}
#footer, .push {
    color: white;
    height: 25px;
}
#sections {
    background-color: #aaaaaa;
}
#main {
    height: auto !important;
    margin: 0 auto -25px; /* bottom margin is negative value of #footer height */
    min-height: 100%;
}
#main {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
    background-size: cover;
}
4

3 に答える 3

0

background-position画像の を設定できます

#main {
    background-image: url('yourimage.jpg');
    background-size: cover;

    background-position: 0 100px; // 100px or whatever the height of your navbar is
}

または、このようにチートすることもできます ;)

#content {
    height: 100px;
    background: url('yourimage.jpg') top;
}
#footer {
    height: 50px;
    background: url('yourimage.jpg') bottom;
}
于 2013-02-18T07:25:57.307 に答える
0

floatフッターは、div で最後に配置したため、下部にとどまります。絶対配置を使用しない限り問題ありません。body問題を解決するには、バックグラウンドでスタイルを移動します。

body {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
    background-size: cover;
}
于 2013-02-18T07:27:48.787 に答える
0

背景画像の垂直位置を簡単に調整できますか?

background-position: left 20px;
于 2013-02-18T07:27:54.843 に答える