Use jquery and CSS to stretch the background picture _jquery

Now the Web page design is more popular using a large background image, then you know how to use a large background picture to stretch the effect? That is, using a fixed-size background image to stretch it in the page as the browser size, like our desktop wallpaper effect. This article will take you through the use of jquery and CSS to achieve a background picture stretching effect.

Stretch the background picture instead of tiling, attention to tile effect we can use CSS background-repeat to implement the background image tiling effect, this article discusses the background picture of the tensile effect. This effect has been widely used in some Avantgarde page design, especially in a number of independent pages, such as the use of the background image of the landing page drawing is more common.
Currently there are two solutions to achieve the background picture stretching effect, one is CSS, we can use Background-size:cover to achieve the picture's tensile effect, but IE8 and the following version does not support background-size, so we try to use the Microsoft filter effect , but IE6 does not support, after all, there are some backward students in the use of IE6. Another solution is to use jquery to completely resolve browser compatibility issues or jquery martial.
CSS Solutions
We prepare a background picture, any size, suppose we want to do a login page, use the page to pull up the background image. All we need to do is add the following code to the body:

<div id= "main" > ... 
Login Form 
</div> 

Then the CSS writes:

Body{background:url (bg.jpg) center center;background-size:cover;height:900px;width:100%; 
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' bg.jpg ', sizingmethod= ' scale ');} 
#main {position:absolute; top:50%; left:50%; width:420px; height:250px; 
margin:-125px 0 0-210px; Background: #ffc} 

We use Background-size to achieve the tensile effect of the background picture, but to be compatible with IE7,IE8 you need to use filter filter to implement, note that in this scenario, you must specify the height of the container, in this case, height:900px is specified.
The CSS scheme has certain limitations, must specify the container height, IE6 incompatible, then the perfect solution is to use jquery.
jquery Solution
We use jquery to insert a div dynamically into the body, and the div contains a picture, which is the background picture that we require to stretch the effect. Then use jquery to get the size of the browser window, and depending on the browser window size, dynamically set the background picture size (width and height).

$ (function () { 
  $ ("Body"). Append ("<div id= ' Main_bg '/>"); 
  $ ("#main_bg"). Append (" 
 

In the above code, the cover () function is to dynamically set the background picture size, through the jquery Append method dynamically joins the background picture, when the page load completes when the browser window changes can realize the background picture the stretch effect, That is, both the page ready and the resize call the cover () function.

Are both of these solutions satisfactory? I prefer the jquery solution , in short, I hope to help you better grasp the jquery and CSS to make the background picture stretching skills.