全宽页眉和页脚由三个图像组成，其中一个图像的宽度可变

Question

我正在尝试使用由三个子元素组成的页眉和页脚。页眉和页脚是纯粹的cosmetical，不用于导航，应该跨越页面的整个宽度。对于页眉和页脚，我每个都有三个图像，每边有一个固定宽度的唯一图像，以及一个填充空间的1px图像。

标题的HTML非常基本：

<div id="header-container">
    <div id="header-left">
    </div>
    <div id="header-mid">
    </div>
    <div id="header-right">
    </div>
</div>

我已经非常接近绝对定位，但随后标题被修复并始终保持在最顶层，这绝对是意想不到的行为（＃header-mid在这里是不必要的）：

div#header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: url(images/header-spacer.png) repeat-x;
}

div#header-left {
    position: absolute;
    width: 600px;
    height: 70px;
    top: 0;
    left: 0;
    background: url(images/header-left.png);
}

div#header-mid {
    display: none;
}

div#header-right {
    position: absolute;
    width: 600px;
    height: 70px;
    top: 0;
    right: 0;
    background: url(images/header-right.png);
}

JSFiddle example with images（确保您的结果窗口宽度超过1200像素）

使用相对定位我无法显示背景图像并使用HTML来显示图像不适用于标题 - 中。

我在网上找到了很多关于全宽页眉/页脚的指南，但没有一个明确讨论过这种组合。

感谢Soheil Gh回答标题的问题，但该方法不适用于页脚。 Here is an additional JSFiddle including the footer

Answer 1

试试这个

div#header-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85px;
background: url(images/header-spacer.png) repeat-x;
}

div#header-left {

width: 640px;
height: 85px;
float:left;
background: url(images/header-left.png);
}

div#header-mid {
float:left;
/*insert background image*/
}

div#header-right {

width: 640px;
height: 85px;
 float:right;
background: url(images/header-right.png);
}