Use jQuery and CSS to stretch background images_jquery

It is now popular to use large background images in WEB page design, so do you know how to use a large background image to create a stretching effect? That is to say, use a fixed-size background image and let it stretch with the browser size in the page, just like our computer desktop wallpaper effect. This article will take you through using jQuery and CSS to achieve a background image stretching effect.

Stretch the background image instead of tile it. Pay attention to the tile effect. We can use CSS background-repeat to implement the tile effect of the background image. This article discusses the stretching 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 for login pages to use stretched background image effects.
There are currently two solutions to achieve the stretching effect of background images. One is CSS. We can use background-size:cover to achieve the stretching effect of images. However, IE8 and below does not support background-size, so we tried to use Microsoft filter effect, but IE6 does not support it. After all, there are still some underachievers using IE6. Another solution is to use jQuery, which completely solves the browser compatibility problem, and jQuery is still powerful.
CSS Solution
We prepare a background image of any size. Suppose we want to make a login page and use a raised background image in the page. We only need to add the following code to the body:

<div id="main"> 
...登录表单 
</div> 

Then the CSS is written like this:

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 and IE8, you need to use a filter to achieve it. Note that in this solution, must specify the height of the container, height:900px is specified in this example.
The CSS solution has certain limitations, the container height must be specified, and IE6 is not compatible, so the perfect solution is to use jQuery.
jQuery solution
We use jQuery to dynamically insert a DIV into the body first, and the DIV contains a picture, which is the background picture for which we require a stretching effect. Then use jQuery to get 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("<div id='main_bg'/>"); 
  $("#main_bg").append("<img src='bg.jpg' id='bigpic'>"); 
  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. The background image is dynamically added through jQuery's append method. When the page is loaded and the browser window changes, the background image can be stretched. The effect is that both the page ready and resize call the cover() function.

Are you satisfied with the above two solutions? I prefer the jQuery solution , . In short, I hope it can help everyone better master the techniques of stretching background images with jQuery and CSS.