Fork me on GitHub

Fixed Background Images

A jQuery plugin to fix background image while scrolling through content of a page. Once new page is scrolled to then a background image changes. The plugin works responsively with both short and long contents.

Scrolling throughout this site to see example

How to include

Download either compressed or uncompressed version then simply include it with jquery.js

<script src="http://code.jquery.com/jquery-[latest].min.js">
<script src="jquery.fixedbg.min.js">

Or install using bower

bower install fixedbg

How to use

Create <div> per page in your HTML

You can use any class. Not necessary to be .page
<div class="page">
  <!-- Content -->
</div>
<div class="page">
  <!-- Content -->
</div>
        

In CSS, add image backgroung to your <div>

<style type="text/css">
  .page:nth-child(1){
    background-image: url("pic1.jpg");
  }
  .page:nth-child(2){
    background-image: url("pic2.jpg");
  }
</style>

Then execute it in your js as

$(function($) {
  $(".page").fixedBG(); 
});

Additional info

Note! by default I try to make image fully fit the screen by adding some CSS background attributes as

{
  background-size: cover,
  background-repeat: no-repeat
}

However, If you wanna style it yourself via CSS, you can disable it by passing option autoAdjust: false. Then, it won't add any extra CSS to your backgroud images.

$(".page").fixedBG({
  autoAdjust: false
});
Head's up! the plugin does not work well with Bootstrap CSS so the hot fix for now is to add into your CSS as the following
* {
  box-sizing: content-box;          
}