Question

http://www.stumbleupon.com/

http://www.mixx.com/

这两个网站都有一个背景标题在页面上展开，而内容居中并覆盖宽度的80％，并且与布局的其余部分完全一致。

我对这两个网站特别感兴趣，因为标题有两种背景颜色，而不仅仅是一种。

我确信网上有很多教程，但我没有要搜索的关键字。

Answer 1

background-image设置为body，其属性为background-repeat：

background-repeat: repeat-x;

更多：http://www.w3schools.com/css/pr_background-repeat.asp

编辑：至于内容的中心 - 我这样做：

<body>
<div id="wrapper">
  <!-- here is wrapper *everything* else -->
</div>
</body>

然后将包装器的width设置为值（主要是960px）。然后，当你将它的边距设置为0 auto时，它会居中。

#wrapper{
  margin: 0 auto;
}

Answer 2

分析stumbleupon.com：

“标题”实际上包含两个 div：wrapperHeader和wrapperNav。这两个有不同的背景颜色。这些div只有一个具有CSS属性的子项

margin: 0 auto

这会导致水平居中。

此属性也分配给内容div，因此标题，导航和内容始终居中。当然，这需要为这些元素设置一些宽度。

结构如下：

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

如果获得Firefox的Firebug，您可以自行轻松分析这些元素。

Answer 3

添加背景图片有两个缺点：

每当您想要更改标题的颜色时，您必须打开Photoshop并更改颜色，然后在CSS中再次更改。
现在您希望页眉的背景颜色在页面上延伸，但如果您也想使用页脚来执行此操作呢？

最简单的解决方案是：

（你不仅创建了一种在页面上拉伸颜色的简单方法，能够在所有页眉内容和页脚中使用不同的颜色，而且还可以避免IE的双边距问题（当你使用宽度时）和相同元素的边距）。

<强>的index.html：

   <html> 
    <body id="body"> 
    <div id="header"> 
        <div class="container"> 
            <!-- header's content here -->
        </div><!-- .container --> 
    </div><!-- #header --> 
    <div id="content"> 
        <div class="container"> 
            <!-- main content here -->
    <div id="footer"> 
        <div class="container"> 
            <!-- footer's content here -->
        </div><!-- .container --> 
    </div><!-- #footer --> 
    </body> 
    </html>

<强>的style.css：

.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}

#header {
    background: #EEE;
}

#content {
    background-color: #F9F9F9;
}

#footer {
    background-color: #333;
    color: #BBB;
    clear: both;
}

在此示例中，div.container使元素居中并为其提供宽度，背景颜色可以在整个页面上延伸，因为＃header, #content和#footer没有宽度。并且将来只需将余量和填充应用于.container内的div，并且将来会为IE节省很多问题。

Answer 4

我不同意，有一种简单的方法可以做到这一点。兼容谷歌Chrome和Firefox，IE未经测试。

在CSS文件中：

body{
    overflow-x:hidden;
}

div#headerbg{
    width:110%;
    margin-left:-20px;
    background-color:black;
}

现在只需在HTML文件中使用它即可。你可以添加定位和什么不是。

Answer 5

您可以使用背景图像1px宽度，水平设置背景重复。

background-image:url('paper.gif');
background-repeat:repeat-x;

然后按照您喜欢的方式调整您的内容。

Answer 6

这只是一个固定宽度的布局，但具有自动左右边距。如果页面大小比内容宽度宽，则效果是使整个内容块居中。

将背景设置为重复图像（repeat-x），使其看起来像菜单元素实际上扩展了页面的整个宽度。

Answer 7

我认为你在谈论100％/ 80％的宽度差异......

这可以帮助您入门：

<div id="header" style="width:100%; margin: 0px;">
   <!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
   <!-- content -->
</div>

边距：内容自动使块居中。

利克亚当说，添加背景重复给它带来图形上令人愉悦的元素。

Answer 8

使用CSS 2，您无法拉伸背景图像。没有用于设置背景图像尺寸的属性。你可以在X，Y或两个轴上重复它。

CSS 3将允许拉伸。

Answer 9

非常简单，没有一大堆喧嚣。

将它粘贴在 - body - 和 - div容器之间 - 你可以在那里拥有你想要的任何东西，但是在我的页面上它是这样的:(我试着把它包起来，不去，只需复制和粘贴。）

<body>

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;  top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg"  id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%;   height:5px;">

<map name="ImageMapImageMap0">
</map>
</div>

<div container>

然后更改顶部所需的信息： px height： _px img src =“yourfile / yourimg.jpg并且重要的是不要忘记下一个高度：_ _px

任何地方都不需要任何其他东西。试试吧。

如何使用CSS在网页背景中拉伸标题

9 个答案: