填充窗口的背景圖片？

我有一個背景圖片，我想填充我的網站的整個背景。我用：填充窗口的背景圖片？

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

圖像是2000px x 2000px。問題是，當瀏覽器窗口大於2000px時，您可以看到白色背景。如果瀏覽器窗口比圖片大，是否有辦法讓圖片變成圖片？

來源

2013-04-21 panthro

可能重複：http://stackoverflow.com/questions/1150163/stretch-and-scale -a-css-image-in-the-background-with-css-only？rq = 1 – levelnis 2013-04-21 19:10:48

你在使用CSS的元素是什麼？ – 2013-04-21 19:12:23

首先，如果您只是將它用於背景，請避免使用背景大的圖片。你可以這樣做，不要把所有東西都遮住。只要在風格標籤中放置這兩個，你就會得到它。

background-image:url('your image'); 
background-size: cover;

如果圖像質量過度膨脹，但是質量可能會受到干擾，但這種方法很有效。

來源

2013-04-21 19:14:17 Sikander

這不起作用。我已經縮小了圖像，但它現在不能填滿屏幕。 – panthro 2013-04-21 19:33:23

試試這個：

background-size: 100% auto;

來源

2013-04-21 19:44:31

background-size: cover;似乎爲我工作的兩種方式 - 既縮小圖像來填補，如果它比元素，或者拉伸圖像，以填補，如果它的體積更小更大。這裏有一個小圖像拉伸的例子，以填補更大的div：http://jsfiddle.net/MRSallee/Q7STG/

來源

2013-04-22 00:22:20

我更喜歡使用這樣的：

background: url(../img/url.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover;

來源

2013-04-22 00:28:35

填充窗口的背景圖片？

回答

相關問題