View on GitHub


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

Download this project as a .zip file Download this project as a tar.gz file


A jQuery plugin for pinnig backgrounds

This plugin allows for full screen background images to stay fixed and fade in and out as you scroll through sections on a page. Adds a nice touch to a page such as a blog post or informational page where plain ol moving backgorunds just won't cut it.


  1. Include jQuery and plugin:

    <script src=""></script>
    <script src="js/jquery.bgpin.js"></script>
  2. Include HTML code:

    <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 -->
  3. Include CSS:

    .bgpin-group {
        min-height: 100%;
        position: relative;
        width: 100%;
        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');
  4. Call the plugin:



View the live demo.