jquery Background Plugin backstretch usage Guide

Source: Internet
Author: User

Backstretch is a simple jquery plugin, can help you to add a dynamic background image to the page, you can automatically resize the size of the screen, of course, the disadvantage is that when the picture size is smaller than the screen, the picture will be due to the automatic extension and deformation, So we can use the high resolution large size of the picture to do the background, more importantly, to support the automatic switching of pictures

A. Backstretch plug-in function

Optimize the appearance of the site. Mainly used to set the background picture of the page, you can also set the background image of HTML elements. The background picture can be set more than once, in the interval of the loop display.


However, when setting a background picture, if the picture is too large and the resources used by the site are limited, the size of the picture should be compressed. Otherwise the picture will load very slowly. I tested the official website demo, pictures are relatively large, some pictures in 400kb or more, in the virtual space to open the site, the picture load a bit slow.

Plug-in demo screenshot effect is not obvious, so it is not posted in this article, you can go to the official to see demo demo, or under this article, there are also I test this plug-in use case, you can see, Chinese demo.

The pictures used by the test cases come from the network, and the size is above 100kb, using one of the official pictures. The picture is not compressed because it is only used by the Test plug-in.

Two. Backstretch official address

The official address has the details of the use of Plug-ins, official address: Https://github.com/srobbin/jquery-backstretch

Three. Backstretch use method

1. Reference file



2. The style used by the test


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The body {font-family: Microsoft ya hei; line-height:1.3em;-webkit-fo nt-smoothing:antialiased; }. Container {width:90% margin:20px auto; Background-color: #FFF; padding:20px;} h1{font-weight:normal; Pre, code {Font-family:monaco, Menlo, Consolas, "Courier New", monospace; font-size:12px; color: #333;-webkit-border-radius:3p X -moz-border-radius:3px; border-radius:3px; Pre {border:1px solid #CCC; Background-color: #EEE; color: #333; padding:10px; overflow:scroll;} code {PADDING:2P x 4px; Background-color: #F7F7F9; border:1px solid #E1E1E8; Color: #D14; "Other {height:300px; color: #FFF;}" other div {position:absolute; bottom:0; width:100%; background: #000; backgr Ound:rgba (0,0,0,0.7); }. Other div p {padding:10px;}

3. Use of JS. Plug-ins are very simple to use.


1 2 3 4 5 $ (function () {$ ('. Container '). CSS ({opacity:. 8});//Set Transparency $.backstretch (["bg.jpg"]);//Background $ (". Other"). Backstretch ([" B.jpg "," a.jpg "," Coffee.jpg "],{duration:4000}); Element background, toggle Reality});

In fact, there are many ways to customize the background of the Web page, in addition to the powerful jquery, we can also use jquery to achieve some of the picture switching effect of the case to modify and realize the dynamic picture of the switch, and finally hope everyone likes!

The above mentioned is the entire content of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.