0

わかりましたので、ページにセクションがあります（ワードプレス）

<header id="masthead" role="banner">
    <div id="header_fix"></div>
</header>

そしてCSS

#masthead {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-repeat:no-repeat;
    background-size:cover;
    padding: 70px 0;
} 
#header_fix {
    margin: 0 auto;
    width: 1355px;
    height: 164px;  
    text-align: center;
    background-image:url(images/Banner_SF.png);
    /*background-size: contain;*/
}

header_fix div を親ヘッダーからオーバーフローさせたい (head_fix fiv 画像は 1800px のような非常に長いバナーです)、常に div の中心 (したがって bg-image の中心) をウィンドウの中心に揃えます。 .

    ______________________________________
    |    masthead always window width     |
____|_____________________________________|___
|   |     header_fix always centered      |   |
|___|_____________________________________|___|
    |                                     |
    |_____________________________________|

色々試してみましたが・・・親子関係でしょうか？like はヘッダーが div のように扱われないか、少なくとも display:block; が必要です。か何か？助けていただければ幸いです。

4

1 に答える 1

2

余分な要素は必要ありません。background-position背景画像を中央に配置するために使用できます。元の画像と同じサイズになります。

ここに略記があります：

#masthead {
    width: 100%;
    margin: auto;
    background: url(images/Banner_SF.png) no-repeat center top;
}

他の質問に答えるには:いいえ、一部のブラウザーでサポートされていないことを除いて、要素<header>は通常の要素とは異なる方法でレンダリングされません。デフォルトではまだブロックレベルの要素です。<div>

于 2012-11-05T08:10:56.397 に答える