JQuery backstretch Dynamic Set background image plugin

Example diagram:

The example diagram is the login interface for bootstrap3.0, and the background image behind it is a switchable dynamic background.

Backstretch is a simple jquery plugin that can help you to add a dynamic background image to the page, you can automatically adjust the size to fit the screen size, of course, the disadvantage is that when the image size is smaller than the screen, the image will be distorted because of the automatic extension, So we can use high-resolution large-size images to do the background, and more importantly, to support automatic image switching.

: Https://github.com/srobbin/jquery-backstretch

Set the body's background (without specifying any elements) code as follows:

<script src= "Scripts/jquery-1.8.2.min.js" ></script><script src= "scripts/jquery.backstretch.min.js "></script><script type=" Text/javascript ">        $.backstretch (" bg.jpg ");</script>

Specify the element to implement the background switch, set the switch between the picture and the picture switch interval time duration, the code is as follows:

<script src= "Scripts/jquery-1.8.2.min.js" ></script><script src= "scripts/jquery.backstretch.min.js "></script>$ (function () {            $ (". Container "). CSS ({opacity:. 8});   Set the transparency            $.backstretch ([                  "images/backgrounds/101_1.jpg",                  "Images/backgrounds/44_1.jpg"            ], { duration:3000, fade:750});        </script>

JQuery backstretch Dynamic Set background image plugin