背景图像随屏幕大小而变化

Question

My website's background is a huge image that covers the whole webpage, how can I make it so that, we detect user's screen size and change the background image accordingly?

Say for example, my background image is 1x1px, if user screen is 2x2px (this is just an example, nobody has this kind of small screen), I want stretch my background to fit 2x2. If user screen is say, 0.5x0.6px, then I want my background to be shown only its 0.5x0.6px part, not the whole 1x1px.

Answer 1

Use an image tag as the background give it a 100% for width and height , and set it behind all of the content with z-index give it absolute positioning and set its top and left where you need it to be.

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

Live Demo

Answer 2

In CSS3, we have a new property called background-size :

body {
    background-size: 100%;
}

Answer 3

looking for this?

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

Answer 4

You can detect the users screen size and do it, also you can attach a event handler to do the same when the window size is modified.

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