goodbackground.js 
Very simple jQuery modern JavaScript improver for your background image.
Install via npm (recommended):
$ npm install goodbackground.js --saveAdd goodbackground.js to your project:
require('goodbackground.js')Old way to install
Download goodbackground.min.js and place file to your project template (before close body tag):
<!-- goodbackground.js minify version -->
<script src="/path/to/goodbackground.min.js"></script>Usage
Add data attribute background-image with full path to your background image (any DOM elements):
<div data-background-image="/path/to/images/picture.jpg">
...
</div>Done!
Customize
By default, goodbackground.js search for DOM elements on page with a required data attribute background-image and apply this default params:
| Option | CSS Property | Available Variables | Default value |
|---|---|---|---|
| position | background-position | left, right, center, top, bottom | center |
| repeat | background-repeat | repeat, repeat-x, repeat-y, no-repeat, initial, inherit | no-repeat |
| size | background-size | auto, length, cover, contain, intial, inherit | cover |
If you want to set another background params or overwrite exists, just add to your container data attributes with this CCS properties:
| Option | CSS Property | Available Variables | Default value |
|---|---|---|---|
| attachment | background-attachment | scroll, fixed, local, initial, inherit | none |
| clip | background-clip | border-box, padding-box, content-box, initial, inherit | none |
| color | background-color | hex/rgb color, transparent, initial, inherit | none |
| origin | background-origin | padding-box, border-box, content-box, initial, inherit | none |
For example:
<div
data-background-image="/path/to/images/picture.jpg"
data-background-size="contain"
data-background-position="bottom right"
data-background-repeat="repeat"
...>
</div>Developers
Development and maintenance of goodbackground.js project engaged by Vikky Shostak (Koddr). If you want to write a «thank you» or ask us about something, use this e-mail.
Your help
If you want help, we will be glad reviews about goodbackground.js on personal blogs (including Twitter), online media and/or specialized IT-portals. Thank you!