Package Exports

goodbackground.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (goodbackground.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!

License

The MIT License (MIT)