在CSS中伸展一個小背景圖像

我遇到的問題是在CSS中縮放或展開圖像的正確語法。在CSS中伸展一個小背景圖像

我已經嘗試了很多東西，但我無法讓它正常工作。

我目前正在使用的代碼是

background:url(../images/body_bg1.jpg) fixed repeat-y; width:100%; height:100%;}

當前與圖像上面的代碼是在頁面的左側平鋪當我使用repeat-y它它平鋪在頁面的頂部。

從我已閱讀我應該能夠使用上面的語法讓我的圖像固定和拉伸我缺少的東西在這裏？

另外上面的代碼可以像這樣格式化代碼，所以它更容易閱讀？

background:url(../images/body_bg1.jpg) fixed repeat-y; 
width:100%; 
height:100%;}

2013-04-25 SwampYeti

該功能剛剛用css3實現。所以它不會在稍微舊的瀏覽器中運行。

div 
{ 
background-image:url('myBG.jpg'); 
background-repeat:no-repeat; 
background-size:cover; 
}

看看這個網站。它是一個非常酷的網站，如果你問我。 http://www.w3schools.com/cssref/css3_pr_background-size.asp

編輯：在舊的瀏覽器其根本不可能沒有一個解決辦法在你的內容的背景通常

<image src=""/>

。

2013-04-25 22:59:59 xeed

真棒！那工作完美。我查看了該網站上的所有其他頁面，但不知何故，我錯過了那一個。由於這是一項新功能，因此舊版瀏覽器會發生什麼情況。我可以谷歌它，但我想你可能有答案:) 感謝您的協助 – SwampYeti 2013-04-25 23:10:01

也使圖像固定或靜態，我使用固定的地方在你提供的語法？ – SwampYeti 2013-04-25 23:11:30

它會忽略封面並以原始大小顯示圖像一次，因爲在較舊的瀏覽器中不執行重複操作。 – xeed 2013-04-25 23:12:10

你應該在這裏使用CSS background-size財產記錯：

background-size:[width] [height]; 
background-repeat:repeat-y;

第二個值將被設置爲自動，如果你只提供一個。

2013-04-25 22:58:03 Descartes

實際上有背景拉伸你必須指定寬度和高度的元素或使用包含：

div 
{ 
background-image:url('image.png'); 
background-repeat:no-repeat; 
background-size:100% 100%; 
/*background-size:contain;*/ 
}

使用覆蓋將延伸一邊和溢出另一個

2013-04-25 23:07:25

啊，所以這是最好的方式，這是與舊版瀏覽器兼容使用％而不是封面？ – SwampYeti 2013-04-25 23:14:31

整個background-size屬性是CSS3，因此與舊瀏覽器不兼容。大小問題是css1的一個衆所周知的問題。所以你遇到了一件事情，自從幾年以來，web開發人員開始感到不安。 – xeed 2013-04-25 23:26:18

xeed是對的。他的回答也是對的。使用百分比覆蓋率的差異在於，覆蓋物拉伸一側並溢出另一側，而百分比控制兩側，因爲您需要拉伸不適合，我認爲您需要使用百分比或包含您必須測試它們所有，並決定什麼是最適合你的 – 2013-04-25 23:41:20

回答