Collection of free jQuery background examples and plugins: adaptive, fullscreen, change color, video and other. Update of January 2018 collection. 2 new items.

Related Articles

  1. CSS Animated Backgrounds
  2. JavaScript Background Effects
Demo image:


  • Donovan

Made with

  • HTML / CSS / JS

About a code

Responsive Animated Triangles Background

The background can be adapted to screen size.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image:


  • Nikola Stamatovic

Made with

  • HTML / CSS / JS

About a code

Another 100 liner in a form of a jQuery plugin created to facilitate YouTube embeds as a cover background using YouTube Embed API.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Adaptive Backgrounds
Made by
  • Brian Gonzalez
Github activity
  • 6373 stars
  • 197 watchers
About the plugin

Adaptive Backgrounds

A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

Demo image: Backstretch
Made by
  • Scott Robbin
Github activity
  • 3910 stars
  • 188 watchers
About the plugin


Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.

Demo image: Vide
Made by
  • Ilya Caulfield
Github activity
  • 3233 stars
  • 118 watchers
About the plugin


Easy as hell jQuery plugin for video backgrounds.

Demo image: BackgroundCheck
Made by
  • Kenneth Cachia
Github activity
  • 3019 stars
  • 83 watchers
About the plugin


Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Demo image: BigVideo
Made by
  • John Polacek
Github activity
  • 2304 stars
  • 162 watchers
About the plugin


The jQuery plugin for big background video (and images).

Demo image: Particleground
Made by
  • Jonathan Nicol
Github activity
  • 1824 stars
  • 81 watchers
About the plugin


A JavaScript (jQuery) plugin for snazzy background particle systems. Includes an optional parallax effect controlled by the mouse on desktop devices and gyroscope on mobile devices. Works in any browser that supports HTML5 canvas.

Demo image: Vegas
Made by
  • Jay Salvat
Github activity
  • 1624 stars
  • 89 watchers
About the plugin


Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and slideshows to DOM elements.

Demo image: Covervid
Made by
  • Stefan Erickson
Github activity
  • 1023 stars
  • 33 watchers
About the plugin


Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension. CoverVid is very lightweight, with only 800 bytes of Javascripts. It is usable in native Javascript and jQuery. Its' logic is parent based, meaning the parent element can be any size (Not necessarily just a full-screen background).

Demo image: Background Blur
Made by
  • Maksim Surguy
Github activity
  • 948 stars
  • 38 watchers
About the plugin

Background Blur

Background Blur plugin is a cross browser and ultra light jQuery plugin for blurring images.

Demo image: jquery.mb.YTPlayer
Made by
  • Matteo Bicocchi
Github activity
  • 928 stars
  • 52 watchers
About the plugin


An open source jQuery component to easily build your custom Youtube® player or to use a Youtube® video as background for your page.

Demo image: MaxImage2
Made by
  • Aaron Vanderzwan
Github activity
  • 414 stars
  • 33 watchers
About the plugin


MaxImage2 is a fullscreen background slideshow plugin that uses jQuery Cycle plugin for it's slideshow functionality.

Demo image: Parallaxify
Made by
  • Felix Pflaum
Github activity
  • 309 stars
  • 24 watchers
About the plugin


Parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds based on gyroscope sensor (device orientation) data or mouse movement. Due to the recent hype started due to the introduction of a parallax effect in iOS 7, I created a plugin that allows anyone to easily incorporate parallax effects to their websites.

Demo image: jQuery Ripples Plugin
Made by
  • Pim Schreurs
Github activity
  • 407 stars
  • 29 watchers
About the plugin

jQuery Ripples Plugin

Add a water ripple effect to your background using WebGL.

Demo image: Waterpipe
Made by
  • DragDropSite
Github activity
  • 313 stars
  • 18 watchers
About the plugin


Waterpipe.js is a jQuery plugin for smoky backgrounds developed by

Demo image: colourBrightness.js
Made by
  • Jamie Brittain
Github activity
  • 153 stars
  • 7 watchers
About the plugin


A lightweight and easy-to-use jQuery plugin that determines if the background colour of an element is light or dark.

Demo image: JQuery Background Image Scroll

JQuery Background Image Scroll

JQuery Background Image Scroll github page demo

A very simple, short, beautiful, and responsive JQuery plugin to scroll background image with page scroll.

Demo image: ckLine


captainKeller github page

Generate random background lines it's great for backgrounds.

Demo image: Vidbacking


Sourav Mukhopadhyay github page demo

This is a small jQuery plugin to simplify the process of showing HTML5 video as background. You can use this for showing a video on whole page background or to show the video as the background of a div, section, like elements.

Demo image: Simple iOS Parallax Effect

Simple iOS Parallax Effect

noobcola github page demo

A simple jQuery plugin that reproduces the moving background parallax effect in iOS using only HTML, CSS, and JS.

Demo image: parallax-background

Parallax Background

Eren Süleymanoğlu github page

jQuery parallax background plugin.

Demo image: imageR


James Tetley github page

This jQuery plugin allows you to add data attr to an image tag or element with a background image to supply different sizes images at different brake points. To save bandwidth when viewing on a mobile but supply sharp large images to larger displays.

Demo image: Full Clip

Full Clip

bdimitrovski github page

This simple plugin does only one thing and it does it well - it creates a responsive full screen body background image by specifying the desired image whether it is a local or remote one. Also, it can create a beautiful background image slideshow by specifying an array of images.

Demo image: jQuery.mb.VimeoPlayer


Matteo Bicocchi github page demo

An open source jQuery component to easily build your custom Vimeo® player or to use a Vimeo® video as background for your page.

Demo image: Material Background Generator

Material Background Generator

James Williams github page

A Material Design background generator built in Javascript and CSS, allows a material-based background to be generated using JS.

Demo image: PhotoFlip


Xavier Kelly github page demo

A simple jQuery plugin that allows you to dynamically change the background image of a container or div by just stating the images in an array and the id of the background you want to change.

Demo image: BackFlip


Xavier Kelly github page demo

A jQuery plugin that allows you to dynamically change the background colors of a container or div.

Demo image: Vidbg.js


Blake Wilson github page

HTML5 jQuery video background plugin.

Demo image: jQuery Background Video

jQuery Background Video

BGStock github page demo

Easily improve your HTML5 background videos with a single line of jQuery.

Demo image: Crosscover


Yasuyuki Enomoto github page demo

Carousel of a simple background image using jQuery and animate.css.

Demo image: Custom Background

Custom Background

CybrHome github page demo

The idea is to let users easily change the background of the website. Users can choose any image or color from the options window to overwrite the default background (set by the developer) of the website. And since the background image or color set is saved in local storage of the browser, the background settings will be retained till the user clears local storage.
Most websites today implement change background theme using server side languages. For e.g. Yahoo Mail, Gmail, Twitter etc. This is not always an easy solution for front end developers and designers. Moreover it kills the performance of the web page.
This plugin is a client side approach for website background customization.

Demo image: Draggable Background

Draggable Background

Kenneth Chung github page demo

A jQuery plugin to make background images draggable.

Demo image: mb.bgndGallery


Matteo Bicocchi github page demo

A sliding photogallery as background made with jQuery.