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="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.fullscreenBackground.js"></script>

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

$("#background-image").fullscreenBackground();

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

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

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

$("#background-image").fullscreenBackground({
  selector: "iframe"
});

<div id="background-image">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Uy9C2bHsczI" frameborder="0" allowfullscreen></iframe>
</div>

---

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