如何使用 CSS 在网页背景上拉伸标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2309819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stretch a header across a web page background with CSS
提问by TPR
Both of these websites have a background header stretched across the page while the content is centered and is covering like say 80% of the width, and that also perfectly aligns with the rest of the layout.
这两个网站都有一个背景标题延伸到整个页面，而内容居中并覆盖了 80% 的宽度，这也与布局的其余部分完美对齐。
I am particularly interested in these two sites, because the header has two background colors, not just one.
我对这两个网站特别感兴趣，因为页眉有两种背景颜色，而不仅仅是一种。
I am sure there are tons of tutorials on the web, but I do not the keywords to search for.
我相信网上有很多教程，但我没有要搜索的关键字。
采纳答案by Felix Kling
Analyzing stumbleupon.com:
分析stumbleupon.com：
The "header" consists actually of twodivs: wrapperHeaderand wrapperNav. Those two have different background colors.
These divs have only one child each that has the CSS property
“标题”实际上由两个div 组成：wrapperHeader和wrapperNav. 这两个有不同的背景颜色。这些 div 只有一个子元素具有 CSS 属性
margin: 0 auto
This results in a horizontal centering.
这导致水平居中。
This property is assigned to the content div too, so the header, navigation and content are always centered. Of course this requires to set some width for this elements.
此属性也分配给内容 div，因此标题、导航和内容始终居中。当然，这需要为此元素设置一些宽度。
The structure looks like this:
结构如下所示：
<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>
If you get Firebugfor Firefox, you can easily analyze the elements yourself.
如果您获得Firebugfor Firefox，您可以轻松地自己分析元素。
回答by Adam Kiss
it is background-imageset to bodywith property background-repeat:
它background-image设置为bodywith 属性background-repeat：
background-repeat: repeat-x;
more: http://www.w3schools.com/css/pr_background-repeat.asp
更多：http: //www.w3schools.com/css/pr_background-repeat.asp
Edit: As for centering your content—Ido it this way:
编辑：至于居中您的内容 -我这样做：
<body>
<div id="wrapper">
<!-- here is wrapper *everything* else -->
</div>
</body>
then set widthof wrapper to value (mostly 960px). Then, when you set it's margin to 0 auto, it centers itself.
然后将width包装器设置为值（主要是960px）。然后，当您将它的边距设置为 时0 auto，它会自行居中。
#wrapper{
margin: 0 auto;
}
回答by alexchenco
Adding background images has 2 drawbacks:
添加背景图像有两个缺点：
Every time you want to change the color of your header you have to open your Photoshop and change the color there and then change it again in your CSS.
Now you want the background color of the header to stretch across the page but what if you want to do that with the footer too?
每次要更改标题的颜色时，您都必须打开 Photoshop 并更改那里的颜色，然后在 CSS 中再次更改它。
现在您希望页眉的背景颜色在整个页面上延伸，但是如果您也想对页脚这样做呢？
The easiest solution is this one:
最简单的解决方案是这个：
(you not only create a an easy way to stretch the color across the page, being able to use different color in all header content and footer, but also it saves yourself from the double margin problem of IE (when you use width and margin in the same elements).
（您不仅创建了一种在整个页面上拉伸颜色的简单方法，能够在所有页眉内容和页脚中使用不同的颜色，而且还可以避免 IE 的双边距问题（当您在相同的元素）。
index.html:
索引.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:
样式.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;
}
In this example, the div.containercenters the elements and also gives them a width, and the background color can stretch across the page because #header, #contentand #footerdon't have width. And in the future just apply margin and padding to divs inside .container, and you'll save lots of problems with IE in the future.
在这个例子中，将div.container元素居中并给它们一个宽度，背景颜色可以在整个页面上拉伸，因为 #header, #content并且#footer没有宽度。并且以后只要对里面的div应用margin和padding，以后就.container可以省去很多IE的问题了。
回答by RichBoy3975
I beg to differ, there is an easy way to do this. Compatible with both Google Chrome and Firefox, IE not tested.
我不同意，有一种简单的方法可以做到这一点。兼容 Google Chrome 和 Firefox，IE 未测试。
In your CSS file:
在您的 CSS 文件中：
body{
overflow-x:hidden;
}
div#headerbg{
width:110%;
margin-left:-20px;
background-color:black;
}
and now simply use it in your HTML file. You can add positioning and what-not to this.
现在只需在您的 HTML 文件中使用它。您可以为此添加定位和其他内容。
回答by anthares
You can use a background image 1px width with set background repetition in horizontal.
您可以使用 1px 宽度的背景图像，并在水平方向上设置背景重复。
background-image:url('paper.gif');
background-repeat:repeat-x;
And then align your content, which way you like.
然后以您喜欢的方式对齐您的内容。
回答by ZombieSheep
This is just a fixed-width layout, but with automatic left and right margins. The effect of this is to centre the whole of the content block if the page size is wider than the content width.
这只是一个固定宽度的布局，但具有自动左右边距。如果页面大小比内容宽度宽，这样做的效果是将整个内容块居中。
the background is just set as a repeating image (repeat-x) to make it look like the menu element actually extends the full width of the page.
背景只是设置为重复图像（repeat-x），使其看起来像菜单元素实际上扩展了页面的整个宽度。
回答by Program.X
I think you're talking about the 100%/80% width differential ....
我认为您在谈论 100%/80% 宽度差异....
This should help you get started:
这应该可以帮助您入门：
<div id="header" style="width:100%; margin: 0px;">
<!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
<!-- content -->
</div>
The margin: auto on the content makes the block centred.
margin: auto 在内容上使块居中。
Liike Adam says, add the background-repeat to give it the graphically pleasing element.
就像亚当说的那样，添加背景重复以使其具有令人愉悦的图形元素。
回答by amy
Very simple without a whole bunch of hoopla.
非常简单，没有一大堆喧嚣。
Paste this in between - body - and - div container - you can have whatever else you want in there as well but on my page it's like this: (I tried to get it to wrap, no go, just copy and paste.)
将其粘贴在 - 正文 - 和 - 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>
Then change the info you need for top:px height:_px img src="yourfile/yourimg.jpg and IMPORTANT don't forget the next height:__px
然后更改顶部所需的信息：px height:_px img src="yourfile/yourimg.jpg 重要的是不要忘记下一个高度：__px
No anything else needed anywhere. Try it.
任何地方都不需要任何其他东西。尝试一下。
回答by Franck
With CSS 2, you can't stretch a background image. There is no property for setting background image dimensions. You can just repeat it on X, Y or both axis.
使用 CSS 2，您无法拉伸背景图像。没有用于设置背景图像尺寸的属性。您可以在 X、Y 或两个轴上重复它。
CSS 3 will allow that stretching.
CSS 3 将允许这种拉伸。
