🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Bgimg is a really simple jQuery plugin that adds background images to specific container without writing any CSS.

background background-image

Documentation

Bgimg

Make images become background-images for HTML elements.

Installation

jQuery is a dependency for jquery.bgimg.js.

Clone this repo then copy jquery.bgimg.js into your project directory.

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

Options

Option Description
data-bgimg backgroundImage The image that you want as background
data-bgimg-repeat backgroundRepeat The option for how your background image is repeated
data-bgimg-size backgroundSize The size of your background image
data-bgimg-position backgroundPosition The position of your background image
data-bgimg-color backgroundColor Bonus The background color of your target element

Note: data-attributes take precedence over options declared using JS.

Example

<div     data-bgimg="./assets/200x200-4.png"     data-bgimg-repeat="no-repeat"     data-bgimg-size="cover"     data-bgimg-position="center center"     data-bgimg-color="transparent"     id="demo"     ></div>  <script type="text/javascript">     $('#demo').bgimg(); </script>

Check out the docs directory for more examples on how to use this plugin.

License

This software is licensed under The MIT License.


You May Also Like