Backstretch.js is a fundamental tool in many a developers arsenal, and few other scripts can really achieve quite the same effect with such minimal effort.
Below is a quick use setup for Backstretch with some additional handy uses and capabilities.
Add inside the head of your HTML document:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js”></script>
Add above the </body> of HTML document:
<script type=”text/javascript”>
$(“body”).backstretch(“/img/background1.jpg”);
$(“.divToBackstretch”).backstretch(“/img/background2.jpg”);
</script>
In the above, we have set Backstretch to both the ‘body’ of the page as well as a div – ‘.divToBackstretch’. The amount of things that this can be applied to within a single page is unlimited, and lines from the above code can be added and removed as needed.
Another example, 3 divs backstretched with seperate images:
<script type=”text/javascript”>
$(“.div1”).backstretch(“/img/background1.jpg”);
$(“.div2”).backstretch(“/img/background2.jpg”);
$(“.div3”).backstretch(“/img/background3.jpg”);
</script>
And more…
Change the positioning of the background image from horizontal center – vertical center to horizontal center – vertical top. View post
Set WordPress featured image to backstretch. View post
