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

您不需要添加自动宽度容器 - 只需为背景图像使用 body 元素(因为它会横跨整个屏幕，无论容器的大小如何。