Разные фоны

Ребята, помогите пожалуйста реализовать разные фоны, для блоков страницы: т.е. хотел бы, чтоб header имел ФОН "А", main имел ФОН "B", а footer имел ФОН "C". Пример можете взглянуть на картинке. Хочу сделать именно так. Как же сделать, чтоб фон был на всю ширину экрана, а не только на размер контейнера?
Скриншот (кликабельный):

Очень прошу помочь! Спасибо за внимание!

 

поместить каждый ваш контейнер в новый с шириной 100% и везде прописать фоны

 

Спасибо за ответ! Но ведь нужно же еще и вынести их за пределы container, верно?
upd: По вашему методу все сбивается, все элементы отображаются слева, никакой отцентровки нету.
Скриншот:

 

центровка: margin: 0 auto;
можно попробовать у первого фона указать background-size и выставить высоту фона с отступом
а чтобы второй фон был под центральным верхним блоком... можно попробовать выставить position:absolute; top: подобрать, чтобы он был с нахлёстом на первый блок.
Например центральному блоку выставить z-index: 999; центральному растянутому на всю ширину - z-index: 777; а нижнему блоку z-index: 888;
может даже не нужно background-size подгонять
есть ссылка на сайт со скриншота?

 

Спасибо за ответ! Буду думать, пробовать. Пример можно глянуть ТУТ.

 

Все просто.
Убираете #container (он в файлах header.tpl и окончание в footer.tpl). В CSS создаете новые элементы (классы)

Код:

.container{
    width: 980px;
    margin: 0 auto;
}
.container-wrapper{
   width:100%;
   margin:0px;
   padding:0px;
}
.header-bg{background:url('путь к изображению шапки') repeat;}
.content-bg{background:url('путь к изображению контента') repeat;}
.footer-bg{background:url('путь к изображению футера') repeat;}

Затем оборачиваете шапку, контент, футер в tpl файлах в такую обертку:

HTML:

<div class="container-wrapper header-bg">
   <div class="container">
   <!-- содержимое шапки --/> 
   </div>
</div>
<div class="container-wrapper content-bg">
   <div class="container">
   <!-- содержимое контента --/> 
   </div>
</div>
<div class="container-wrapper footer-bg">
   <div class="container">
   <!-- содержимое футера --/> 
   </div>
</div>

И все.

 

Огромное спасибо! Очень интересный вариант. Сейчас буду пробовать.

 

главное не забыть что каждый кусок выносится в одтельный файл *.tpl

 

Во всей работе будут участвовать всего два файла header.tpl и footer.tpl.
header.tpl

Код:

<div class="container-wrapper header-bg">
   <div class="container">
   <!-- содержимое шапки --/>
   </div>
</div>
<div class="container-wrapper content-bg">
   <div class="container">

footer.tpl

Код:

</div>
</div>
<div class="container-wrapper footer-bg">
   <div class="container">
   <!-- содержимое футера --/>
   </div>
</div>

 

Скажите пожалуйста, а как-то можно сделать так, что фон контента наложился на пикселей 10 на фон шапки?

 

Не знаю. Видимо придется для фона шапки вручную создать изображение, которое содержит 10 пикселей фона контента.