Como montar essa parte do Layout

Então galera, pra quem quiser dar uma conferida:

http://www.buthy.com.br/fisk

O problema é naquela imagem logo abaixo das ações promocionais e da newsletter...

Uma imagem de fundo que tem sombra...

O que eu fiz foi dividir esse background em 3 imagens, o topo, o meio (repeat-y), e o rodapé, que é essa imagem com a sombra...

Segue o css:

#conteudo-topo {
width:1000px;
height:5px;
margin:0 auto;
margin-top:-20px;
background:url('../images/bg-conteudo-topo.png') no-repeat center;
}
#conteudo {
width:1000px;
margin:0 auto;
background:url('../images/bg-conteudo-meio.png') repeat-y center;
min-height:500px;
}
#conteudo-rodape {
width:1240px;
height:45px;
margin:0 auto;
background:url('../images/bg-conteudo-rodape.png') no-repeat center;
}

#conteudo-topo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.buthy.com.br/fisk/images/bg-conteudo-topo.png&key=ed62bcd5308ab736c8344b37955ec4cab3ad0f22f48e953113fe74ca79958917" alt="bg-conteudo-topo.png" />

#conteudo-meio:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.buthy.com.br/fisk/images/bg-conteudo-meio.png&key=c81531c6317e98bd4a7b9c8a5360699e2931591ca7d82914d2b28fca90af517b" alt="bg-conteudo-meio.png" />

#conteudo-rodape:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.buthy.com.br/fisk/images/bg-conteudo-rodape.png&key=6c4e59e121f6eb952a6f821977ce91d4aa42d2730a0765885d6d13bda0bb1480" alt="bg-conteudo-rodape.png" />

O que eu fiz foi deixar o tamanho da imagem com a sombra em 1240 x 45, e centralizar ela...

Daí fica encaixado certo...

Mas o problema é quando você esta navegando em janela, por exemplo, essa parte fica "quebrada" e nao se encaixa logo abaixo do #conteudo-meio... No Ipad também fica torto...

Teria algum outro jeito de fazer isso?

Muito obrigado!

Até mais!