Adding a subtle background noise to Web pages is becoming a design trend: it produces a nice old-skool “analog” look that feels more like the “real world”. Neat examples are Forrst.com or Stripe.com, as well as many UI elements in iOS5.

Click the image to see a demo of NoiseGen, the jQuery plugin discussed later in this article

The usual way to achieve the effect is to use an image editing software to produce a PNG image and then set it as the background-image through CSS. Still, this approach has some drawbacks. First of all, the image has its bandwidth footprint. Moreover, fine-tuning background noise during development can be very time consuming, having to come back to the image editing software to save a new image each time you want to adjust the effect. Luckily, there’s a solution: using JavaScript and the HTML5 canvas element to dynamically produce a background image.

The idea is simple: create a canvas element, paint it with noise, and then set it as the background-image through CSS.

// Create the canvas
var canvas = document.createElement("canvas");
canvas.width = 80;
canvas.height = 80;
var context = canvas.getContext("2d"), x, y, opacity = 0.2;

// Paint it with random noise
for (x=0; x < canvas.width; x++) {
  for (y=0; y < canvas.height; y++) {
    var rand = Math.floor(Math.random() * 60);
    context.fillStyle = "rgba("+rand+","+rand+","+rand+","+opacity+")";
    context.fillRect(x, y, 1, 1);
  }
}

// Use it as the CSS background-image (here we are assuming jQuery is imported)
$("body").css("background-image", "url(" + canvas.toDataURL("image/png") + ")");

Unfortunately, some browsers do not support the canvas element yet (guess who?), so we need to provide for a graceful fallback. Also, it would be cool to have the possibility to finely tweak parameters like opacity, dimension of the image, size of the noise grains, statistical distribution of noise, colors, etc…

Luckily, we’ve got you covered! NoiseGen is an open-source jQuery plugin that does exactly that, offering support for a fallback image for crappy old browsers and many useful configuration options. Using it is straightforward:

$(document).ready({
  $("body").noiseGen({ fallbackImage: "bkgnd.png" });
});

Here we’re adding background noise to the body element. Cool browsers will do that dynamically on the client side, while old browsers can rely on the bandwidth hungry image. Moreover, we can finely tweak the look of our background:

$("body").noiseGen({
  fallbackImage: "bkgnd.png",
  opacity: 0.7,
  width: 64,
  height: 64,
  grainDimension: {
    width: 5,
    height: 1
  },
  fromColor: "0099CC",
  toColor: "10AADD",
  independentChannels: true,
  distribution: "uniform",
  bias: 5
});

Do you want to give noiseGen a try? There’s a demo here, and you can read more documentation on the GitHub project page, where you can also fork the code and contribute if you want.