web-dev-qa-db-ja.com

CSS:100%の幅と背景?

私のページには、幅と背景が100%のセクションが2〜3個あります。全画面で開くとすべてが問題ありませんが、画面が960ピクセル(このセクションのコンテンツの幅)より小さい場合、背景画像はページ全体ではありません。右側のwhisは、背景がない最初の瞬間に隠されています-それは白です。ここで私が意味することを見ることができます: http://micobg.net/10th/

12
micobg

単に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>
23
Jay

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;
}
5
Mazdak Shojaie

背景の最小幅を使用:960px; width:100%の代わりに;乾杯

2
Simon Dragsbæk