Как покрыть всю ширину страницы, независимо от того, какой размер экрана у пользователя с фиксированным ману?

Question

У меня проблема с меню, которое фиксировано и центрировано на странице.Я хочу, чтобы все меню (3 фоновых изображения) покрывало всю ширину страницы, независимо от размера экрана пользователя.

Оригинальные изображения:

(Изображение 1: ширина 1px , высота 76px;)
(Изображение 2: ширина 1135px, высота 76px;)
(Изображение 3: ширина 1px , высота 76px;)

После изменения CSSЯ хочу, чтобы они стали:

(Изображение 1: ширина 392,5px , высота 76px;)
(Изображение 2: ширина 1135px, высота 76px;)
(Изображение3: ширина 392,5px , высота 76px;)

<div style="position:fixed; width:100%; height:76px;">
  <div> Picture 1 </div>  <!-- repeat-x on the left side -->
  <div> Picture 2 , center of the page , no-repeat</div>
  <div> Picture 3</div>  <!--  repeat-x on the right side -->
</div>

Я хочу установить значение repeat-x на рисунках 1 и 3, но не знаю ширины.Я могу это исправить с помощью jQuery, но нет ли способа в CSS?

Answer 1

Обновлено для прозрачного центрального изображения См. http://jsfiddle.net/QEPX4/5/show/

HTML

<div class="TriHeader">
  <div class="left"><div></div></div>
  <div class="center"></div>
  <div class="right"><div></div></div>
</div>

CSS (представитель)

.TriHeader {
    position:fixed;
    width:100%;
    height:76px;
}

.TriHeader div {
    height: 76px;
    position: absolute;
}

.TriHeader .left {
    left: 0;
    right: 50%;
    z-index: 0;
}

.TriHeader .left div {
    background: url(repeatingLeftImage.png) top left repeat-x;
    right: 567.5px;
    left: 0;
    top: 0;
}

.TriHeader .center {
    background: url(nonrepeatingCenterImage.png) top left no-repeat;
    width: 1135px;
    left: 50%;
    margin-left: -567.5px; /*ideally, the image would be an even number */
    z-index: 1;
}

.TriHeader .right {
    left: 50%;
    right: 0;
    z-index: 0;
}

.TriHeader .right div {
    background: url(repeatingRightImage.png) top left repeat-x;
    left: 567.5px;
    right: 0;
    top: 0;
}

Если вас не волнует IE7, вы можете удалить вложенные элементы div слева и справа и заменить css псевдо-селекторами элементов, такими как:

.TriHeader .right:before {
    content: '';
    display: block;
    position: absolute;
    background: url(repeatingRightImage.png) top left repeat-x;
    left: 567.5px;
    right: 0;
    top: 0;
}