背景圖像隨屏幕尺寸變化

Question

我的網站背景是一個覆蓋整個網頁的巨大圖像，我如何使它能夠檢測用戶的屏幕尺寸並相應地更改背景圖像？

舉例來說，我的背景圖像是1x1px，如果用戶屏幕是2x2px（這只是一個例子，沒有人有這種小屏幕），我想伸展我的背景以適應2x2。如果用戶屏幕是0.5x0.6px，那麼我希望我的背景僅顯示其0.5x0.6px部分，而不是整個1x1px。

Answer 1

爲背景給它一個width和height一個100%使用圖像標籤，並設置其背後所有z-index的內容給它absolute定位並設置其top和left在你需要它的人。

<img src="yourimage" width="100%" height="100%" style="z-index:0"/> 

Live Demo

Answer 2

找這個？

<div style="width:100%; z-index:0; height:100%; background: url(1pximage.gif)"></div> 

Answer 3

CSS3中，我們有一個新的屬性稱爲background-size：

body { 
    background-size: 100%; 
} 

Answer 4

您可以檢測到用戶的屏幕尺寸並做到這一點，你也可以附加一個事件處理程序做同樣的，當窗口大小被修改。

$(function(){ 

    $(window).resize(function(){ 

     var windowW = $(window).width(); 
     var windowH = $(window).height(); 

     //Using above variables you can deside the size of the background image to be set 
    }).resize();//Trigger the resize event on page load. 
});