BGpin.js

A jQuery plugin for full screen backgrounds that stick and fade.

BGpin allows you to create a cool fixed background effect on web pages.

The background images cover the entire page and are stationary (fixed) while the text continues to scroll in the foreground.

Download from GitHub

For Example, Turn this....

Text over an image

Helps to tell a story

or add excitement to a blog post

with visually stimulating imagery

... into this

Text over an image

Helps to tell a story

or add excitement to a blog post

with visually stimulating imagery

hopefully, it's just that easy

The Code

The HTML

Add as many "bgpin-single" divs as you like, they will be the sections with the background images.

They must all be contained within the bgpin-group div.

<div class="bgpin-group"><!-- the parent container -->

 <div class="bgpin-single your-bgpin-single-first-background"><!-- add as many as you like -->
  <div class="bgpin-single-content">
   <!-- your content here, style as you like -->
  </div><!-- /.bgpin-single-content -->
 </div><!-- /.bgpin-single -->


another added like above (need at least two for the effect to work)

 <div class="bgpin-single your-bgpin-single-second-background">...

</div><!-- /.bgpin-group -->

The CSS

The container element (a generic div with the class .bgpin-group) is what will be targeted by the JavaScript.

The child elements (.bgpin-single) will need background images attached

.bgpin-group {
 min-height: 100%;
 position: relative;
 width: 100%;
}
.bgpin-single{
 background-size: cover;
 height: 100vh;
 position: relative;
 width: 100%;
}


add your background images

.your-bgpin-single-first-background {
 background-image: url('path-to-your-image');
}
.your-bgpin-single-second-background {
 background-image: url('path-to-your-image');
}

The JavaScript / jQuery

Just add "bgpin()" to your parent holder element.

$('.bgpin-group').bgpin();

There you have it. Enjoy.

")