Create Responsive Fullscreen Backgrounds With jQuery

File Size: 5.7 KB
Views Total: 2819
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Responsive Fullscreen Backgrounds With jQuery

A simple, lightweight jQuery plugin for creating a responsive fullscreen background (e.g. video background, image background) that will auto resize to fill the screen on window resize. Similar to the CSS3 background-size: cover property.

How to use it:

1. Add both jQuery library and the jQuery fullscreenBackground.js script to the webpage.

<script src="//"></script>
<script src="jquery.fullscreenBackground.js"></script>

2. Initialize the plugin and you're ready to go.


3. Create a responsive fullscreen background from a given image as this:

<div id="background-image">
  <img src="bg.jpg">

4. Sometimes you might need a video background for your modern web design.

  selector: "iframe"
<div id="background-image">
  <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

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