Basic Background Parallax Effect With jQuery And CSS

File Size: 53.1 KB
Views Total: 2615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Background Parallax Effect With jQuery And CSS

background-parallax-scroll is an ultra light jQuery plugin which utilizes CSS background-position-y property to apply a basic parallax scrolling effect on your background image.


# Yarn
$ yarn add jquery.background-parallax-scroll

$ npm install jquery.background-parallax-scroll --save

How to use it:

1. Create a container on which you want to apply the parallax scroll effect.

<div class="banner">
  ... Content Here ...

2. Add a background image to the container.

.banner {
  background-image: url(;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

3. Set the background-attachment to fixed.

@media (min-width: 1024px) {
  .banner {
    background-attachment: fixed;

4. Put jQuery JavaScript library and the background-parallax-scroll.js script right before the closing body tag.

<script src="//"></script>
<script src="src/jquery.background-parallax-scroll.js"></script>

5. Enable the parallax scroll effect on the background image.

jQuery(function($) {

6. Specify the animation speed.

jQuery(function($) {
    speed: 3 // Optional



  • Bugfix


  • Bugfix


  • Code refacting


  • JS & CSS refactor.

This awesome jQuery plugin is developed by inc2734. For more Advanced Usages, please check the demo page or visit the official website.