如何舒展了头跨Web页面的背景与CSS

http://www.stumbleupon.com/如何舒展了头跨Web页面的背景与CSS

http://www.mixx.com/

这两个网站都在页面上拉伸背景头，而内容为中心，并覆盖好比说80％宽度，而且与布局的其余部分完全一致。

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

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

来源

2010-02-22 TPR

分析：

的 “头” 实际上包含的的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>

如果你Firebug为Firefox，你可以很容易地分析自己的元素。

来源

2010-02-22 09:17:17

这是一个很好的答案。但是，这里有一个可能会吸引一些人的问题 - 这肯定会让我感动！我的一位同事正在进行一些调试，并需要确定在我们的Web应用程序的各个部分中使用了哪种布局。解决这个问题的简单方法是在DOCTYPE声明之前在模板文件的顶部放置注释。您猜对了：该网站在Firefox中完美呈现，IE中唯一明显的区别是顶部横条并不完全贯穿整个页面。修正是为了确保DOCTYPE之前没有任何东西。 – JamesG 2011-11-09 05:35:38

是background-image设置为body财产background-repeat：

background-repeat: repeat-x;

编辑：至于你的中心内容 - 我做这种方式：

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

，然后将包装的width设置为值（主要为960px）。然后，当您将其余量设置为0 auto时，它将自行定位。

#wrapper{ 
    margin: 0 auto; 
}

来源

2010-02-22 09:12:40

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

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

然后调整你的内容，你喜欢哪种方式。

来源

2010-02-22 09:13:28 anthares

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

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

来源

2010-02-22 09:14:25 ZombieSheep

我想你说的是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>

保证金：在内容自动使以块为中心。

立克亚当说，添加背景重复给它的图形赏心悦目的元素。

来源

2010-02-22 09:14:40

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

你想改变你的头，你必须打开你的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内部应用边距和填充，就可以在将来节省很多与IE相关的问题。

来源

2010-02-22 09:30:26 alexchenco

伟大的答案 - 非常简单，简洁等... +1 – nicorellius 2014-04-18 20:22:10

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

CSS 3将允许伸展。

来源

2010-02-22 10:15:05 Franck

我不同意，有一个简单的方法来做到这一点。兼容谷歌浏览器和Firefox，IE未经测试。

在你的CSS文件：

body{ 
    overflow-x:hidden; 
} 

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

，现在只是用它在你的HTML文件。你可以添加定位和什么不是这个。

来源

2012-05-17 14:26:57 RichBoy3975

+1，只是想指出，如果您的任何内容将比视口更宽，则缺少水平滚动可能会成为问题。 – ametren 2012-06-26 15:03:11

很简单，没有一大堆喧闹。

将它粘贴在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高度： _px IMG SRC =“yourfile/yourimg.jpg和重要的别忘了未来高度：_ _px

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

来源

2014-01-30 02:26:06 amy

如何舒展了头跨Web页面的背景与CSS

回答

相关问题