jQuery Plugin To Insert Background Images Without CSS - Bgimg

Bgimg is a really simple jQuery plugin that adds background images to specific container without writing any CSS. Supports all CSS background-image properties using HTML5 data attributes.

How to use it:

1. First you have to download and load the jQuery Bgimg plugin after jQuery library like this:

<script src="//code.jquery.com/jquer.min.js"></script>
<script src="jquery.bgimg.js"></script>

2. Add a background image to the container '.demo' using HTML5 data-bgimg attribute:

<div class="demo"
     data-bgimg="1.png">
</div>

3. Apply custom CSS background properties to the background image using HTML5 data attributes as follows:

<div class="demo"
     data-bgimg="1.png"
     data-bgimg-color="rgba(72, 79, 221, 1)"
     data-bgimg-repeat="no-repeat"
     data-bgimg-size="contain"
     data-bgimg-position="bottom right">
</div>

4. Call the function on the container and done.

$('.demo').bgimg();

5. You can also override the default background properties in the JavaScript like this:

$('.demo').bgimg({
  backgroundColor: "transparent",
  backgroundRepeat: "no-repeat",
  backgroundSize: "auto auto",
  backgroundPosition: "50% 50%",
});

---

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