背景图像随屏幕尺寸变化

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. 
});