CSS - センターヘッダの背景自動サイジングコンテナの画像（自動サイドリサイズ）

Question

現在、CSSのコンテナの静的な幅は900pxで、ヘッダの背景画像は同じ幅です。私は、コンテナを自動サイズ調整し、中心のヘッダーの背景イメージの両端にソリッドカラーの自動サイジング領域を持たせたいと思います。

ありがとうございます！

ズッキーニ

これは私がしたいソリッドカラーにあなたのヘッダーの背景色を設定し

/* ------------------------------ 
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; 
} 

Answer 1

と協力して、ノー・リピートで背景画像を中央に配置されているものです。ここで

は、あなたが何をすべきかです：

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

Answer 2

あなたはautowidthコンテナを追加する必要はありません - ちょうどにかかわらず、それが画面全体にまたがるうとして（あなたの背景画像用body要素を使用しますコンテナのサイズ