This time I will share jQuery Plugin and tutorial about jQuery Plugin To Insert Background Images Without CSS – Bgimg, hope it will help you in programming stack.
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:
1 |
<script src="//code.jquery.com/jquer.min.js"></script> |
2 |
<script src="jquery.bgimg.js"></script> |
2. Add a background image to the container ‘.demo’ using HTML5 data-bgimg attribute:
3. Apply custom CSS background properties to the background image using HTML5 data attributes as follows:
3 |
data-bgimg-color="rgba(72, 79, 221, 1)" |
4 |
data-bgimg-repeat="no-repeat" |
5 |
data-bgimg-size="contain" |
6 |
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:
2 |
backgroundColor: "transparent", |
3 |
backgroundRepeat: "no-repeat", |
4 |
backgroundSize: "auto auto", |
5 |
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.
