Use jQuery and CSS to stretch the background image _ jquery

This article mainly introduces how to use jQuery and CSS to stretch the background image, so that it is stretched along with the browser size on the page, just like our desktop wallpaper, if you need a large background image, you can refer to the popular WEB page design. How do you use a large background image for stretching? That is to say, a fixed-size background image is used to stretch the page with the browser size, just like our desktop wallpaper. This article will show you how to use jQuery and CSS to stretch the background image.

Stretch the background image rather than tile it. Pay attention to the tile effect. We can use the CSS background-repeat to implement the tile effect of the background image. This article discusses the stretch effect of the background image. This effect has been widely used in some avant-garde page designs, especially in some independent pages. It is common to use stretched background images on login pages.
There are currently two solutions to achieve the stretching effect of the background image, one is CSS, we can use background-size: cover to achieve the stretching effect of the image, however, IE8 and earlier versions do not support background-size. Therefore, we try to use Microsoft filter effects, but IE6 does not. After all, there are still some underachievers who are using ie6. Another solution is to use jQuery to completely solve the compatibility problem of browsers, or jQuery mighty.
CSS Solution
We have prepared a background image of any size. Suppose we want to create a login page with a raised background image. We only need to add the following code to the body:

... Login form
 

Then write CSS as follows:

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 stretching effect of the background image, but to be compatible with IE7, IE8 needs to use the filter. Note that in this solution,The height of the container must be specified.In this example, height: 900px is specified.
The CSS solution has certain limitations. You must specify the container height and IE6 is incompatible. Therefore, the perfect solution is to use jQuery.
JQuery Solution
We use jQuery to dynamically insert a DIV into the body, and the DIV contains an image, that is, the background image that we want to stretch. Then, use jQuery to obtain the size of the browser window, and dynamically set the size (width and height) of the Background Image Based on the browser window size ).

$ (Function () {$ ("body"). append ("
"); $ (" # Main_bg "). append (""); cover (); $ (window ). resize (function () {// cover ();}); function cover () {var win_width = $ (window ). width (); var win_height = $ (window ). height (); $ ("# bigpic "). attr ({width: win_width, height: win_height });}

In the above Code, the cover () function dynamically sets the size of the background image, and dynamically adds the background image through the jQuery append method, when the page is loaded, the background image can be stretched when the browser window changes. That is, the ready and resize functions of the page call the cover () function.

Are you satisfied with the above two solutions? I preferJQuery SolutionIn short, we hope to help you better master jQuery and CSS techniques for stretching background images.