Как правильно сделать

[Simel]

Задача сделать шапку с растягивающимся изображением на всех экранах.

Делаю такую структуру.

<div id="header_wrapper">
     <div id="header_top"></div>
     <div id="header_bottom"></div>
</div>

Допустим в header_top и header_bottom заданы изображения через css, таким образом.

background: url(../images/header_top.png) repeat-x;
width: 100%;
height: 28px;

Выходит что у нас изображение растягивается на весь экран,если посмотреть пример сайта http://slando.ru/ , на данном ресурсе шапка растягивается в зависимости от велечены экрана. Однако элементы в шапке расположены по середине и у этого блока задана определенная ширина.

От сюда вопрос, как такое правильнее реализировать. Если я задам header_wrapper атрибуты margin: 0 auto; и width: 720px; То изображение растягиваца не будут.

Ps. Есть еще идея , склейть эти два изображения и сделать их просто фоновым и повторить по осе x, а элемент header выравнить по центру с определенной шириной и туда уже поместить элементы. Но верно ли это ?

Edited August 6, 2012 by Simel

[DStereo]

Задача сделать шапку с растягивающимся изображением на всех экранах.

Делаю такую структуру.

<div id="header_wrapper">
     <div id="header_top"></div>
     <div id="header_bottom"></div>
</div>

Допустим в header_top и header_bottom заданы изображения через css, таким образом.

background: url(../images/header_top.png) repeat-x;
width: 100%;
height: 28px;

Выходит что у нас изображение растягивается на весь экран,если посмотреть пример сайта http://slando.ru/ , на данном ресурсе шапка растягивается в зависимости от велечены экрана. Однако элементы в шапке расположены по середине и у этого блока задана определенная ширина.

От сюда вопрос, как такое правильнее реализировать. Если я задам header_wrapper атрибуты margin: 0 auto; и width: 720px; То изображение растягиваца не будут.

Ps. Есть еще идея , склейть эти два изображения и сделать их просто фоновым и повторить по осе x, а элемент header выравнить по центру с определенной шириной и туда уже поместить элементы. Но верно ли это ?

Тут без дополнительных элементов не обойтись. Например так:

<div class="header">
     <div class="header-top-wrap">
          <div class="header-top"></div>
     </div>
     <div class="header-bottom-wrap">
          <div class="header-bottom"></div>
     </div>
</div>

.header-top-wrap,.header-bottom-wrap{
    background: url(../images/header_top.png) repeat-x;
    height: 28px;
}

.header-top,.header-bottom{
    width:720px;
    margin:0 auto;
}

[Simel]

Спасибо за совет)