Using CSS and a noise image to make a noise background
To make a image with noise pattern, we always directly using a png image to do so. However, if we have different color of noise background and want to have different opacity, we should make much more image. Here introduce a method that allow you to make a noise background with numerous different color which just use one image.

Firstly, we should create a background with some noise. Than apply a background color on it. CSS code as below:

background: url(noise.png) #F00

We have now made a red background with noise. If you need a transparent background, than we can use rgba instead:

background: url(noise.png) rgba(255,0,0,0.5)

This created a red noise background with opacity 50%
As lower version IE doesn't support rgba setting, so we need to do more:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#AAFF0000', endColorstr='#AAFF0000');

On the above case, #AAFF0000, FF0000 is the color code and AA represent the transparent gradient which FF means opaque and 00 means full transparent. Note that if rgba and the filter exists together, the noise will not work, so we would need to use CSS hack to handle different case, the full supported code as below  

background: url(noise.png) rgba(255,0,0,0.5);
background: url(noise.png) transparent \\\\9;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#77FF0000', endColorstr='#77FF0000');

Below is an example: