2014-09-20 97 views
0

我想在我的網站上設置一個新的bg,但是我無法使它工作。基本上我有一張照片(尺寸50x2000像素),我想創建重複的背景。在我的CSS我用:html中的背景高度

#test{ 
width: 50px; 
height: 100%; 
background:url(images/bg.png); 
background-repeat:repeat-x; 
min-width: 100%; 
position: absolute; 
} 

而且這部分的工作,我可以看到,BG是重複的,但有一個與HIGHT問題。我的網頁瀏覽器應該擠壓圖片的高度以適合整個網站的圖片,現在我只能看到圖片的頂部,這是因爲圖片高度太大了2000 px。那麼,爲了使bg適合我的網站,我必須更改我的CSS代碼?

感謝

+0

使用background-size prop作爲'-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;' – Sam1604 2014-09-20 09:18:31

+0

不幸的是仍然無法正常工作。這就是我想要達到的目標:oi62.tinypic.com/6dstis.jpg – a8537994 2014-09-20 09:41:31

+0

這裏有一個溝通問題 - 看起來你並沒有用一種答覆的人能夠清楚地理解你的問題來描述你的問題,所以我建議你你從你的問題創建一個JSfiddle來說明問題。 – Terry 2014-09-20 11:44:15

回答

0

更新你的CSS爲

#test 
{ 
width: 50px; 
height: 100%; 
background:url(images/bg.png); 
background-repeat:repeat-x; 
min-width: 100%; 
position: absolute; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
+0

不幸的是仍然無法正常工作。這是我想實現的:oi62.tinypic.com/6dstis.jpg – a8537994 2014-09-20 09:40:56

0

好,如果你想垂直做background-repeat:repeat-x;應該background-repeat:repeat-y;look聽到

編輯,嘗試刪除這些絕對和其他選項,以便瀏覽器可以處理的其餘部分:

#test{ 
background:url(images/bg.png); 
background-repeat:repeat; 
} 
+0

不幸的是仍然無法正常工作。這裏是我想要實現的:oi62.tinypic.com/6dstis.jpg – a8537994 2014-09-20 09:42:19

+0

只留下選項:背景:url(images/bg.png); background-repeat:repeat-xy;並讓瀏覽器完成剩下的工作。在Firefox上工作。只是爲了確保檢查其他瀏覽器。如果有些問題可以改變repeat-xy來重複-y。 – 2014-09-20 14:16:59

+0

我還有同樣的問題。看看這個http://jsfiddle.net/rpzguw4y/3/並檢查原始圖像是如何看起來的,它比結果框中的要大得多 – a8537994 2014-09-20 14:27:15

0

在這你的CSS

height:2000px; 

補充:

#test{ 
width: 50px; 
height: 2000px; 
background:url(images/bg.png); 
background-repeat:repeat-x; 
min-width: 100%; 
} 

它應該解決你的問題。

更新: 這是Fiddle。你在你的小提琴中使用的圖像是900px,所以我將高度設置爲900px.and我認爲你的問題已經解決。請更多地解釋你的問題,如果不是這樣。

問:你爲什麼需要絕對位置?去掉它。

+0

不幸的是仍然無法正常工作。這是我想要實現的:http://oi62.tinypic.com/6dstis.jpg – a8537994 2014-09-20 09:40:06

+0

我更新了我的答案。 PLZ檢查:) – 2014-09-21 10:32:17