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：在重複背景圖像的頂部居中背景圖像

回答

相關問題