Goodbackground.js NPM

goodbackground.js

Very simple ~~jQuery~~ modern JavaScript improver for your background image.

Install via `npm` (recommended):

$ npm install goodbackground.js --save

Add 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!