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 - 中心标题背景自动调整大小的自动调整大小容器中的图像

回答

相关问题