background-noise

javascript background noise generator to css background-image

If you have previously downloaded/installed, please either update, or re-download/install. Significant improvements have been made!

Getting Started

In the browser

Download the production version or the development version.

In your web page:

<script src="dist/background-noise.min.js"></script>
<script>
  var elementThatNeedsNoise = document.getElementById('elementThatNeedsNoise');

  backgroundNoise(elementThatNeedsNoise); //apply to single element
  
  backgroundNoise();                      //apply to document.body (default)
</script>

On the server

Install the module with: npm install background-noise

var backgroundNoise = require('background-noise'),
  elementThatNeedsNoise = document.getElementById('elementThatNeedsNoise');
  
backgroundNoise(elementThatNeedsNoise); //apply to single element

backgroundNoise();                      //apply to document.body (default)

Documentation

#Defaults:

backgroundNoise({
  element:      document.body,          //the element to apply the noise to
  width:        256,                    //pixels (px) width of noise canvas
  height:       256,                    //pixels (px) height of noise canvas
  colourBG:     'rgb(11, 11, 11)',      //colour of the background
  colourNoise:  'rgb(111, 111, 111)',   //colour of the noise
  opacityMax:   0.5,                    //maximum opacity range for generating random opacity for noise
  opacityMin:   0.25,                   //minimum opacity range for generating random opacity for noise
  returnImage:  false,                  //whether to return the noise image (png data uri) or set image as element background
  key:          'BackgroundNoiseImage'
});

Examples

See the 'example' directory within the package for a more comprehensive example.

var backgroundNoise = require('background-noise'),
  elementThatNeedsNoise = document.getElementById('elementThatNeedsNoise');
  
backgroundNoise(elementThatNeedsNoise); //apply to single element

backgroundNoise(); //apply to document.body

Contributing

Please don't edit files in the "dist" subdirectory as they are generated via Grunt. You'll find source code in the "lib" subdirectory!

Release History

(Nothing yet)

License

Copyright (c) 2015 terry gyde [email protected] (http://patho.gen.nz)
Licensed under the Unlicense license.