html - CSS:将背景图像置于重复背景图像之上

Question

我正在尝试为网站创建标题。我想要做的是在我的页面上一直重复背景图像作为标题背景。这个图像是 1px 宽。在该图像之上，我想将另一个背景图像居中放置在前一个图像的顶部，并使其居中且不重复。第二张图片是网站的标志和标题等。

使用下面的代码，我得到的顶层没有居中，并与底层重复。

.mainHeaderBottomLayer
{
    background-image: url("images/header.png");
    background-repeat: repeat-x;
    height: 107px;
    text-align: center;
}
.mainHeaderTopLayer
{
    background-image: url("images/headerLayer.png");
    background-repeat: no-repeat;
    width: 1200px;
    margin: 0 auto;
}

这是html

<div class="mainHeaderBottomLayer">
    <div class="mainHeaderTopLayer"></div>
</div>

有人知道如何做到这一点吗？

Answer 1

背景:url("images/headerLayer.png") 无重复中心顶部#fff;
或者
background: url("images/headerLayer.png") 不重复 50% 0 白色；