如何使一個長頁面網站的CSS響應背景img

我已經嘗試了兩天，現在讓背景img響應手機。這是一個長的主頁（大約8000px）。整個頁面的內容有一個div父「background_div」。我已經嘗試了兩種，尺寸封面或包含標籤，img超過pixaleted，就像它會放大，內容是響應，但背景img讓我頭痛。我需要它來識別設備寬度，縮小並保持固定不會沿着8000px長的頁面拉伸。任何人都能給我一個想法嗎？如何使一個長頁面網站的CSS響應背景img

#background_div { 
 
\t background-image: url('home.jpg'); 
 
\t background-repeat: no-repeat; 
 
\t background-position: center; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
\t background-attachment: fixed; 
 
} 
 

 
/*It just won't scale to the divice width and height*/

<div id="background_div">

來源

2016-02-04 Horatiu

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

這些設置爲蓋是要伸展圖像以適合容器，不管它有多大。這是什麼導致你的伸展。

將它們設置爲auto，或者根本不要設置它們，如果您希望圖像保留其原始大小。

來源

2016-02-04 22:54:47

它運作良好，在筆記本電腦，儘量減少檢查，如果它的響應，但現在我的手機上，它就會爲中心，以中，只佔據一小部分離開頁面的大部分白色的時候，我是新來響應CSS ，你能再給我一個關於如何完成這個任務的建議嗎？ – Horatiu

找到一個體面的解決方案，它需要一些小的改變，但似乎它的工作， – Horatiu

CSS2

如果需要使圖像更大，必須編輯圖像本身在圖像編輯器。

如果您使用img標籤，您可以更改大小，但如果您需要將圖像作爲其他內容的背景，則不會給您想要的結果（並且它不會像您似乎想要的那樣重複）...

CSS3釋放權力

這是可能與背景大小CSS3做。

所有的現代瀏覽器都支持這個功能，所以除非你需要支持舊瀏覽器，否則這就是實現它的方法。

支持的瀏覽器：

的Mozilla Firefox 4.0+（壁虎2.0+）時，Microsoft Internet Explorer 9.0以上，歌劇10.0+和Safari 4.1+（webkit的532）和Chrome 3.0+。

#background_div { 
    /* width: will stretch to width/height of element */ 
    background-size: 100% 100%; 
}

來源

2016-06-29 02:19:52

如何使一個長頁面網站的CSS響應背景img

回答

相關問題