Header-bg div 100％is not really 100％

Question

私はheader-bg divを常にフルブラウザの幅にしようとしています。

私はいくつかの雲の背景画像を持っています。私はCtrl +スクロールを使用すると、画像は元の幅のままで、左揃えのままです。元のページビューでは、bgは100％の幅に完璧ですが、私はそれを画面幅で完璧にしたいと思います。これも可能ですか、間違っていますか？

相続コード：探しのための

body, html { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0;} 


#header-bg { 
    background-image:url(images/header/header-bg.jpg); 
    background-repeat:no-repeat; 
    min-width:100%; 
    width:100%; 
    margin:0; 
    position:fixed; 
    height:402px;} 

<div id="header-bg"> 
<div id="header"> 
<div id="navigation"> 
</div> 
</div> 
</div> 

ありがとう！

Answer 1

デフォルトでは、背景イメージのサイズを変更できません。 background-sizeプロパティは、全体のDIVを埋めるためにあなたの背景を取得するために使用する必要があります。

#header-bg { 
    background-image: url(images/header/header-bg.jpg); 

    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%; 
    /*Other CSS*/ 
} 

このCSS機能はによってサポートされています。

• のFirefox 3.6以降
• オペラ9.5以降
• クローム1 +
• サファリ3+
• Internet Explorer 9+

このプロパティを使用できない場合、残るオプションは<img>要素のみです。
フィドル：http://jsfiddle.net/Hf79s/

<style> 
#header-bg{ 
    width:100%; 
    height: 50px; 
} 
#header-bg-img { 
    height: 100%; 
    width: 100%; 
} 
</style> 
<div id="header-bg"> 
    <img src="images/header/header-bg.jpg" id="header-bg-img" /> 
</div> 

Answer 2

あなただけの背景画像は、余分な広い作ることができ、それはあまりにも大画面を記入します。唯一の欠点は、画面が小さくても画像全体が見えないことですが、装飾的な雲だけの場合はうまくいくはずです。

他の解決策は、背景サイズです。しかしこれには、背景が不均衡にスケールされるか、画像の下端がクリップされるという欠点があります。また、古いIEのバージョンはそれをサポートしていません。