Background-noise NPM

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