CSS：如何在重复的背景图片上居中另一张背景图片？

Question

我正在尝试为网站创建页眉。 我想要做的是在页眉背景上全部重复一个背景图像。该图像宽度为1像素。 在该图像之上，我想放置另一个背景图像，并将其居中且不重复。 第二个图像是该网站的标志和标题等。

使用下面的代码，我得到的顶部覆盖层不居中且重复底部图层。

.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>

有人知道如何实现吗？

- Jared Sol

Answer 1

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

- Ricardo Castañeda

---

谢谢，不过我仍然在mainHeaderTopLayer中遇到了重复的背景。 - Jared Sol

背景：url（“images/headerLayer.png”）不重复居中顶部白色 - Ricardo Castañeda

.mainHeader { 背景: url("images/header.png") 重复-x 居中顶部; 高度: 107像素; } .mainHeaderLayer { 背景: url("images/headerLayer.png") 不重复 居中顶部; 宽度: 1200像素; 边距: 0 自动; } - Jared Sol

尝试为背景添加一些颜色，在我的先前的帖子中有一个例子。 - Ricardo Castañeda

颜色没有起作用。就好像子div从父级继承了重复属性一样。但是在Firebug中，它显示子元素为no-repeat。 - Jared Sol

尝试使用http://jsfiddle.net/在线测试您的代码。这将使解决任何未来问题更加容易。 - Ricardo Castañeda

Answer 2

.mainHeaderTopLayer {
background: url(images/headerLayer.png) no-repeat center top;
width: 1200px;
height: 200px;
margin: 0 auto; }

只需通过背景属性和位置属性将图像居中。

根据上面的评论，您还需要一个高度属性....

- Scott

Answer 3

使用背景定位来对齐Logo：

.mainHeaderTopLayer
{
    background-image: url("images/headerLayer.png");
    background-repeat: no-repeat;
    background-position: center center;
    width: 1200px;
    margin: 0 auto;
}

- faino