jQuery Plugin To Insert Background Images Without CSS - Bgimg

File Size: 5.13 KB
Views Total: 809
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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"

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

<div class="demo"
     data-bgimg-color="rgba(72, 79, 221, 1)"
     data-bgimg-position="bottom right">

4. Call the function on the container and done.


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

  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.