ヘッダー要素の背景 css タグを使用して、Web ページの上部にバナーを配置しています。
HTML:
<section class="page-wrapper">
<header class="block"></header>
<div class="container"></div>
<footer></footer>
</section>
CSS:
.page-wrapper > header {
background: url('/path/to/image.jpg') no-repeat;
background-size: cover;
width: 100%;
height: 450px;
}
スティッキー フッターに使用される別の CSS ルール。関連するかどうかはわかりませんが、念のためここに追加します。
.block {
display: table-row;
}
これは、Chrome と Firefox で問題なく動作します。ただし、Internet Explorer 11 および 10 では、レンダリングに失敗することがあります。しかし、カーソルをメニュー項目の上に置くと、その要素の下でのみレンダリングされます。「ときどき」とは、F5 キーを 30 回連打できることを意味し、レンダリングされる場合とレンダリングされない場合があります。私にはランダムに見えます。
キャッシュの問題を除外するために、画像の名前を変更しようとしました。
IE 11 と 10 の両方で 3 台の別々のコンピューターで試しました。
埋め込まれたスクリーンショットを投稿できないようです。少なくとも 10 の評判が必要です。代わりにimgurにリンクします。
ワーキング: http://imgur.com/COhiKgx
誰もがこのようなことを経験しましたか?
編集: コメントにライブ サイトの URL を追加しました。元の投稿にこれ以上リンクを追加できません。