Add Inline Background Images Using Data Attribute - jQuery EasyImg

EasyImg is a dead simple and cross-browser jQuery plugin which adds inline background images to container elements using HTML data attributes.

Use this plugin to quickly add background images without the need of using background-image style.

How to use it:

1. Put all your background images in the images folder.

/images/1.jpg
/images/2.jpg
/images/3.jpg
...

2. Add background images to the container elements using the data-img attribute as follows:

<div data-img="1.jpg">
  Background 1
</div>

<div data-img="2.jpg">
  Background 2
</div>

<div data-img="3.jpg">
  Background 3
</div>

...

3. Include jQuery library and the jQuery EasyImg plugin's files at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="easyImg.min.js"></script>

4. Initialize the plugin and done.

$.easyImg();

5. Change the default folder name/path that holds your background images.

$.easyImg({
  baseFolder: './images/'
})

6. Change the default data attribute.

$.easyImg({
  selector: 'data-img'
})

7. Default CSS styles of background images.

selector {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

---

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