如何覆盖整个页面宽度，无论用户使用固定手册的屏幕尺寸如何？

Question

我的菜单在页面上固定并居中时遇到问题。我希望整个菜单（3 个背景图像）覆盖整个页面宽度，无论用户的屏幕尺寸如何。

原图：

（图一：宽1px，高76px；）
（图2：宽1135px，高76px；）
（图3：宽1px，高76px；）

在 CSS 更改后，我希望它们变成：

（图一：宽392,5px，高76px；）
（图 2：宽 1135 像素，高 76 像素；）
（图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>

我想在图片1和3上设置repeat-x，但不知道宽度。我可以用 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;
}