CSS - 中心標題背景自動調整大小的自動調整大小容器中的圖像

我的CSS容器當前具有900px的靜態寬度，並且存在具有相同寬度的標題背景圖像。我想使容器自動調整大小，並在居中的頁眉背景圖像的兩端都有純色自動調整大小的區域。CSS - 中心標題背景自動調整大小的自動調整大小容器中的圖像

謝謝！

西葫蘆

這就是我一直在與

/* ------------------------------ 
global styles 
------------------------------ */ 

body 
{ 
margin: 0; 
padding: 0; 
font: Verdana, Geneva, sans-serif; 
text-align: center; 
color: #F0F0F0; 
background: #FFFFFF; 
} 

a:link { color: #B52c07; } 
a:visited { color: #b93411; } 
a:focus { color: #000; } 
a:hover { color: #7d8206; } 
a:active { color: red; } 
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; } 

h2 
{ 
color: #000000; 
font: 140% Verdana, Geneva, sans-serif; 
} 

h2 a { text-decoration: none; } 

h3 
{ 
color: #000000; 
font: 110% Verdana, Geneva, sans-serif; 
} 

/* ------------------------------ 
container styles 
------------------------------ */ 

#container 
{ 
margin: 1em auto; 
width: 100%; 
text-align: center; 
background: #fff; 
border: 1px solid #000000; 
} 

/* ------------------------------ 
header styles 
------------------------------ */ 

#headertop 
{ 
position:relative; 
height: 178px; 
width: 100%; 
text-align:center; 
/*background-position:center; 
/*position:static;*/ 
background-image:url(../images/Header.jpg); 
/*background-position:center; 
/*background: url(../images/Header.jpg);*/ 
background-color:#000000; 
border-bottom: 0px solid #fff; 
}

來源

2011-12-09 zucchini

我們可以看到一些代碼/實例嗎？ – Kyle

也是HTML！請：） – Kyle

-1

設置你的頭背景顏色爲你想純色，然後用不重複居中背景圖像。

這裏是你應該做的：

#headertop 
{ 
    margin: 0 auto; 
    background-image:url(http://dummyimage.com/900x100/ab24ab/0011ff.png&text=Header); 
    background-repeat:no-repeat; 
    background-color:#000000; 
}

來源

2011-12-09 06:26:52 Maheep

這並不能產生預期的效果。 – zucchini

你可以把代碼，你試過嗎？ – Maheep

以下是我一直在處理的內容： – zucchini

你並不需要添加一個autowidth容器 - 只使用body元素作爲背景的圖像（因爲它會在整個屏幕上跨越，無論容器的大小

來源

2011-12-09 08:45:21 Wex

CSS - 中心標題背景自動調整大小的自動調整大小容器中的圖像

回答

相關問題