CSS - 使用图块定位多个背景图像

Question

我创建了一些瓷砖，并希望将它们放在一个瓷砖中。我的问题已经在标题行中开始了。 红色部分是“header-left.png”和“header-right.png”，紫色部分是重复的图块“header-center.png”。

我已经拥有的东西：

.test {
width: 800px;
height: 200px;
border: dashed 1px #006597;
background-image: url('../images/standard/header-left.gif'), 
    url('../images/standard/header-center.gif');
background-repeat: no-repeat, repeat-x;
}

但是我怎么能告诉第二个背景，在50px之后开始，所以它在header-left.gif之后开始？我如何定位第三个背景以使其与右边对齐？

这就是我现在得到的：

这是我的目标： 红色：标题左 紫罗兰：重复头部中心 黑色：标题右 绿色：重复背景 蓝色：页脚图像

Answer 1

将标题包装在一个容器中，并有3个单独的元素相互浮动：

#headerLeft{/*Custom Styles*/}
#headerCenter{/*Custom Styles*/}
#headerRight{/*Custom Styles*/}

有一个身体容器和一个页脚容器。

<强> Here's a Fiddle

您可以将背景颜色样式替换为您的图像，它应该是您正在寻找的颜色。

Answer 2

将标题划分为三个div，然后加载每个标题div的背景

Answer 3

尝试这样的事情：

HTML

<container>
  <header>
    <div class="red">
    <div class="purple">
    <div class="black">
  </header>
  <div class="green">
...

CSS

.header{
  width: 800px;
}

.red{
  display: inline-block;
  width: 50px;
}

.purple{
  display: inline-block;
  width: 650px;
}

.black{
  display: inline-block;
  width: 100px;
}

并添加您当前的背景信息