构建repeat-x标头

Question

我有一些布局css问题。他们更像是最佳实践，也是最有效的方法。让我先从我想要实现的图表开始。

此标题菜单背景将为液体，其中的按钮将被固定。所以它真的由一个独立于灰色风格背景的左按钮组成。然后是灰色样式背景中的3个或更多按钮，后跟一些图标和搜索字段，所有这些按钮都在灰色背景中。我的主要问题是如何实现如何实现灰色背景扩展到浏览器宽度100％并且每端仍然有2个圆角。

这是一个伪html结构

<div id="menuHeader">
<ul>
    <li class=""><a href="#">home</a></li>
    <li class=""><a href="#">button1</a></li>
    <li class=""><a href="#">button2</a></li>
    <li class=""><a href="#">button3</a></li>
    <li class="tools">
      <div class="icon">icon1</div>
      <div class="icon">icon2</div>
      <div class="icon">icon3</div>
      <div class="search"></div>
    </li>
</ul>

现在css问题我在哪里放置我的重复背景。如果我将它作为背景图像放在menuHeader上，那么它将是一个没有左右角的长重复背景图形。 我是否需要为左右和中心设置div。然后把我的灰色按钮放在那里，我的蓝色主页按钮位于左边div的左边。或者有没有办法可以使用现有的标签，而不必处理额外的空div标记。

我很抱歉，如果我不是更清楚，但我认为的主要问题是清楚如何让背景图形具有圆角和重复背景。然后可以将我的按钮添加为背景图形。

更新：不幸的是，这不会是html5

Answer 1

#menuHeader {
  position: relative;
  width: 100%;
  background: url("bg.png") repeat;/*An image which has a width of 1px is sufficient*/
}
#leftSide, #rightSide{
  position: absolute;
  top: 0;
  width: 20px;/*Whatever width*/
  height: 40px;/*Whatever height*/
}
#leftside{
  background: url("left.png") transparent;
}
#rightside{
  background: url("right.png") transparent;
}

在div＃menuHeader中添加此HTML：

<div id="menuHeader">
  <div id="leftside"></div><div id="rightside"></div><!--This location is chosen, so that the automatic z-indexing causes the background to stay at the background-->
  ....
</div>

创建两个图像（或一个，以减少服务器负载，并使用background-position）。如果要添加该蓝色框，请展开左背景图像。确保div＃menuHeader中的元素具有透明或无背景。