Collection of free jQuery background examples and plugins: adaptive, fullscreen, change color, video and other
Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.
jquery.youtube-background
Nikola Stamatovic | August 8, 2019
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.
Chrome, Edge, Firefox, Opera, Safari
yes
-
Backstretch
Scott Robbin | January 20, 2010
3910 stars188 watchers
About a code
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.
Particleground
Jonathan Nicol | August 17, 2014
1824 stars81 watchers
About a code
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.
Covervid
Stefan Erickson | May 2, 2014
1023 stars33 watchers
About a code
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).
Parallaxify
Felix Pflaum | June 20, 2013
309 stars24 watchers
About a code
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.
Waterpipe
DragDropSite | May 12, 2014
313 stars18 watchers
About a code
Waterpipe.js is a jQuery plugin for smoky backgrounds developed by dragdropsite.com
JQuery Background Image Scroll
About a codeA very simple, short, beautiful, and responsive JQuery plugin to scroll background image with page scroll.
ckLine.js
About a codeGenerate random background lines it's great for backgrounds.
Vidbacking
About a code 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.
Simple iOS Parallax Effect
About a codeA simple jQuery plugin that reproduces the moving background parallax effect in iOS using only HTML, CSS, and JS.
Parallax Background
About a codejQuery parallax background plugin.
ImageR
About a codeThis 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.
Full Clip
About a codeThis 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.
jQuery.mb.VimeoPlayer
About a codeAn open source jQuery component to easily build your custom Vimeo® player or to use a Vimeo® video as background for your page.
Material Background Generator
About a codeA Material Design background generator built in Javascript and CSS, allows a material-based background to be generated using JS.
PhotoFlip
About a code 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.
BackFlip
About a code A jQuery plugin that allows you to dynamically change the background colors of a container or div.
Vidbg.js
About a codeHTML5 jQuery video background plugin.
jQuery Background Video
About a codeEasily improve your HTML5 background videos with a single line of jQuery.
Crosscover
About a codeCarousel of a simple background image using jQuery and animate.css.
Custom Background
About a code 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.
Draggable Background
About a codeA jQuery plugin to make background images draggable.
mb.bgndGallery
About a codeA sliding photogallery as background made with jQuery.
Discover Our Extensive Snippet Library
This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.
HTML Snippets.
Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.
CSS Snippets.
Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations
JavaScript Snippets.
Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms
Bootstrap Snippets.
Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components
Tailwind Snippets.
Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to
jQuery Snippets.
Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations
Let's craft a visual identity that ignites passion and loyalty. ✨