HTML-CSS Control Background Map full-screen stretch non-repeating display

In HTML, when we set the background map, we can only take the option of overlapping, centering, overlapping direction

Set in CSS3

{      background:#3d71b8 url (.. /back_main.png);       background-size: 100%;       background-position:center;  }  

But Background-siz is a property of CSS 3 and not all browsers support it.

CSS2 does not have a picture full-screen stretched properties, can only think of other ways.
Use a DIV layer to load an IMG tag inside. Then set the div and img size to 100% and pin it to the bottom of the screen, thus achieving the perfect stretch and maximizing the image.
First, add the following code to the body:

<id= "Div1"><src= "img.jpg"/ ></div>

Then add the CSS code:

Div#div1 { position:fixed; top:0; Left:0; Bottom:0; Right:0; z-index:-1; }{ height:100%; width:100%; border:0

Final effect:

In this way, we implemented a fixed center and automatically stretched full screen background image, but she is a layer, so when the user right in the blank page, the display is the picture information, which may make users feel inconvenient.
In fact, Firefox has a much better stretching effect than IE, and it automatically feathering the details of the image. IE in the image after stretching the pixel is very ugly, so it is recommended to use high-resolution images as the background.

Reproduced in this article, thank you.

HTML-CSS Control Background Map full-screen stretch non-repeating display