私のページには、幅と背景が100%のセクションが2〜3個あります。全画面で開くとすべてが問題ありませんが、画面が960ピクセル(このセクションのコンテンツの幅)より小さい場合、背景画像はページ全体ではありません。右側のwhisは、背景がない最初の瞬間に隠されています-それは白です。ここで私が意味することを見ることができます: http://micobg.net/10th/
単にbackground-size:100%
スタイルを適用した要素のスタイルbackground-image
。 Firefox、Safari、およびOperaで動作します。例えば:
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>
this の記事については、cover
も使用する必要があります。
html {
background: url(PATH_TO_IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
背景の最小幅を使用:960px; width:100%の代わりに;乾杯