Estou trabalhando em um site que usa vários gradientes css3 como sobreposição para um plano de fundo lado a lado com imagem de textura

URL do site:--snipped--

atualmente para o cabeçalho, estou usando o seguinte 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;}

aqui headerBg.png é uma textura semi-transparente de tamanho 5x5 pixel, anúncio para corpo, preciso criar este plano de fundo:

Eu preciso saber como criar esse tipo de plano de fundo radial no CSS3, inicialmente eu tinha usado o mesmo código do cabeçalho, mas com rgba () para cores, definindo o final do gradiente com 0 opacidade, mas isso gerou muito ruído.

Tentei alguns geradores on-line, bem como para o fundo radial CSS3, mas nenhum deles era bom!

Esta imagem que estou usando ocupa 280kbs e quero reduzi-la, pois afeta significativamente o desempenho! Ajuda seria apreciada.

atualizar:

Upload psd, pode ser baixado dehttp://ylspeaks.com/stackoverflow_css3.zip

e adicionando recompensa