Header-bg div 100％isnt 100％

我得到這個問題，試圖讓header-bg div始終是完整的瀏覽器寬度。Header-bg div 100％isnt 100％

我有一些雲的背景圖像，當我用CTRL +滾動圖像保持原來的寬度並保持左對齊。在原始頁面視圖中，bg是完美的100％寬度，但我希望它與al屏幕寬度完美匹配。這是可能的還是我錯了？

繼承人的代碼：

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>

爲尋找謝謝！

來源

2011-10-17 Alexander Vaz

默認情況下，背景圖像不會縮放，儘管有一些黑客可以使其工作。見[此鏈接]（http://css-tricks.com/766-how-to-resizeable-background-image/） – Clive

默認情況下，背景圖像無法調整大小。該background-size酒店使用，讓您的背景充滿了整個DIV：

的Firefox 3.6+
歌劇9.5+

鉻：

#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功能是通過支持1+

的Safari 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>

來源

2011-10-17 17:49:34

F * ckin awsome！謝謝你們，這得到了我想要的效果。 –

你可以只作背景圖片超寬，所以這將填補大屏幕了。唯一的缺點是較小的屏幕不會看到整個圖像，但是當它只是裝飾性的雲彩時，它應該沒問題。

另一種解決方案是背景大小。但是這有一個缺點，即背景或者不成比例地縮放，或者圖像的底部被裁剪掉。另外較舊的IE版本不支持它。

來源

2011-10-17 17:52:18 Gerben

Header-bg div 100％isnt 100％

回答

相關問題