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
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
jquery.youtube-background
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: -
- 6373 stars
- 197 watchers
Adaptive Backgrounds
A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.
- 3910 stars
- 188 watchers
Backstretch
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.
- 3233 stars
- 118 watchers
Vide
Easy as hell jQuery plugin for video backgrounds.
- 3019 stars
- 83 watchers
BackgroundCheck
Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
- 2304 stars
- 162 watchers
BigVideo
The jQuery plugin for big background video (and images).
- 1824 stars
- 81 watchers
Particleground
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.
- 1624 stars
- 89 watchers
Vegas
Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and slideshows to DOM elements.
- 1023 stars
- 33 watchers
Covervid
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).
- 948 stars
- 38 watchers
Background Blur
Background Blur plugin is a cross browser and ultra light jQuery plugin for blurring images.
- 928 stars
- 52 watchers
jquery.mb.YTPlayer
An open source jQuery component to easily build your custom Youtube® player or to use a Youtube® video as background for your page.
- 414 stars
- 33 watchers
MaxImage2
MaxImage2 is a fullscreen background slideshow plugin that uses jQuery Cycle plugin for it's slideshow functionality.
- 309 stars
- 24 watchers
Parallaxify
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.
- 407 stars
- 29 watchers
jQuery Ripples Plugin
Add a water ripple effect to your background using WebGL.
- 313 stars
- 18 watchers
Waterpipe
Waterpipe.js is a jQuery plugin for smoky backgrounds developed by dragdropsite.com
- 153 stars
- 7 watchers
ColourBrightness.js
A lightweight and easy-to-use jQuery plugin that determines if the background colour of an element is light or dark.
A very simple, short, beautiful, and responsive JQuery plugin to scroll background image with page scroll.
Generate random background lines it's great for backgrounds.
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.
A simple jQuery plugin that reproduces the moving background parallax effect in iOS using only HTML, CSS, and JS.
jQuery parallax background plugin.
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.
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.
An open source jQuery component to easily build your custom Vimeo® player or to use a Vimeo® video as background for your page.
A Material Design background generator built in Javascript and CSS, allows a material-based background to be generated using JS.
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.
A jQuery plugin that allows you to dynamically change the background colors of a container or div.
HTML5 jQuery video background plugin.
Easily improve your HTML5 background videos with a single line of jQuery.
Carousel of a simple background image using jQuery and animate.css.
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.
A jQuery plugin to make background images draggable.
A sliding photogallery as background made with jQuery.