Estoy trabajando en un sitio web que utiliza múltiples gradientes css3 como superposición para un fondo en mosaico con imagen de textura

Sitio URL:--snipped--

Actualmente para el encabezado estoy usando el siguiente CSS:

#header {
 background: #DBD6D3;
 height: 364px;
 background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
 background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}

#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}

aquí headerBg.png es una textura semitransparente de tamaño 5x5 píxeles, anuncio para el cuerpo que necesito para crear este fondo:

Necesito saber cómo hacer este tipo de fondo radial en CSS3, inicialmente había usado el mismo código como encabezado pero con rgba () para el color, configurando el final del gradiente con 0 opacidad pero creaba demasiado ruido.

¡también probé algunos generadores en línea para el fondo radial CSS3 pero ninguno de ellos era bueno!

¡Esta imagen que estoy usando ocupa 280kbs y quiero reducirla ya que afecta significativamente el rendimiento! La ayuda sería apreciada.

actualizar:

Subir psd, se puede descargar desdehttp://ylspeaks.com/stackoverflow_css3.zip

y agregando recompensas