即使頁面放大或縮小，如何保留固定的背景圖像大小？

我有一個圖像，我想設置爲我的背景與尺寸1x700。即使頁面放大或縮小，如何保留固定的背景圖像大小？

這是一種漸變的圖像，所以我需要它到repeat-x。

我遇到的主要問題是圖像沒有填滿整個頁面。但是，它仍然是固定的。具體來說，當我滾動出來時，我可以看到圖像沒有填滿整個頁面。

我在firefox和chrome中工作的代碼，但沒有在IE9中工作。如果這有什麼不同，我也將這個皮膚應用到dotnetnuke。

這裏是我的代碼：

body 
{ 
    background-image: url('images/bg.jpg'); 
    background-attachment: fixed; 
    background-repeat: repeat-x; 
    background-size: contain; 
    -moz-background-size: contain; 
}

來源

2011-07-19 Jacob Cunningham

警告

避免使用瀏覽器縮放或其他瀏覽器相關功能搞亂了，造成這樣做可能會降低用戶體驗，expecially對誰依靠用戶在他們最喜歡的瀏覽器的這些功能！

這就是說，不管瀏覽器縮放的，我知道一個元素的唯一方式十個分量它的大小是由具有容器元素佔據所有的屏幕，並有個措施，這樣裏面的元素。

http://jsfiddle.net/yLFj8/4/

來源

2011-07-19 15:40:50

剝離下來的CSS，它應該工作。這應該是你需要的一切。

body { 
    background-image: url('images/bg.jpg'); 
    background-repeat: repeat-x; 
}

看到這裏我的例子

http://jsfiddle.net/jasongennaro/fSG7j/1/

來源

2011-07-19 16:47:21

不知道如果我理解正確：

以適應圖像全屏顯示，使用CSS屬性：

background-size:100% 100%;

但是請注意，如果尺寸不符合要求，它會拉伸圖像rect

來源

2013-12-29 02:40:54 Lenny

即使頁面放大或縮小，如何保留固定的背景圖像大小？

回答

相關問題