CSS：在重复背景图像的顶部居中背景图像

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

通过下面的代码，我得到顶层不居中并重复底层。

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

任何人都知道这可怎么办呢？

来源

2012-02-27 Jared Sol

background：url（“images/headerLayer.png”）no-repeat center top #fff;
或
background：url（“images/headerLayer.png”）no-repeat 50％0 white;

来源

2012-02-27 01:54:53

谢谢合作我仍然得到了反复的背景对于mainHeaderTopLayer – 2012-02-27 01:56:30

background：url（“images/headerLayer.png”）无重复中心顶部白色 – 2012-02-27 01:59:19

.mainHeader { \t background：url（“images/header.png”）repeat-x center top; \t height：107px; } .mainHeaderLayer { \t background：url（“images/headerLayer.png”）no-repeat center top; \t width：1200px; \t margin：0 auto; } – 2012-02-27 02:01:38

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

只是通过背景属性和位置属性来居中图像。

基于上述评论你需要一个高度属性以及....

来源

2012-02-27 01:56:47 Scott

使用背景定位对准标志：

然而

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

来源

2012-02-27 01:57:09 faino

CSS：在重复背景图像的顶部居中背景图像

回答

相关问题