Проблема наложения фонов

[posthack]

Верстка здесь : http://portfolio.imatte.us/kitos/

Проблема в следующем. Необходимо поменять фон таким образом, чтобы полосы по бокам на широких экранах (скрин : http://i.imgur.com/eBWgQ9h.jpg ) были не #000, а #2a2a2a.

 

Я задаю фон для body #2a2a2a, но в таком случае и для контента фон становится #2a2a2a, а мне нужен #000.

 

Тогда я ставлю для .site-body

background: url('../images/content-bg.png') top center repeat-x !important #000;

Но тогда получается так: http://i.imgur.com/M7XQosz.png

 

Если ставлю для #wrap

background: url('../images/bg-top.jpg') top center #000;

то нижняя часть фона пропадает, и все просто черное.

 

Подскажите, как исправить?

[amelice]

а какая совместимость браузеров? Если рассматриваете более современные браузеры, то можно боди оставить #2a2a2a, а к врапу написать цвет фона #000  и добавить  верхний, нижний фон. Но не могу сказать насколько корректно так делать.
Или что мешает таким ж образом как у вас сейчас  #wrap:after оформить #wrap:before? просто z-index-ы разные поставить?

[posthack]

Спасибо!

 

Переместил нижний фон из боди в wrap:before, и поменял z-index'ы.

Edited May 29, 2014 by posthack