我希望我的博客容器具有独立于整个页面的背景。但是，它以 wood.png 而非 bg.png 作为背景。 我正在使用以下内容:
CSS
body {
background: url('img/bg.png') repeat;
}
.above {
background: url('img/wood.png') repeat;
width: 100%;
}
#blog-header {
background: url('img/wood.png') repeat;
height: 160px;
width: 100%;
text-align: center;
}
#blog-container {
background: url('img/bg.png') repeat;
margin: 0 auto;
width: 960px;
}
#blog {
float: left;
margin-top: 80px;
position: relative;
width: 620px;
}
HTML/PHP
<body>
<div class="above">
<div id="blog-header">
<div class="logo">
<a href="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Urban Palate logo" id="logo" /></a>
</div><!-- end logo -->
<nav>
<ul>
<li><a href="/?page_id=7"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="Urban Palate intro" /></a></li>
<li><a href="/?page_id=12"><img src="<?php echo get_template_directory_uri(); ?>/img/portfolio.png" alt="Urban Palate portfolio" /></a></li>
<li><a href="/?page_id=15"><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="Urban Palate blog" /></a></li>
<li><a href="/?page_id=10"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="Urban Palate contact" /></a></li>
</ul>
</nav>
</div><!-- end blog-header -->
<div id="blog-container">
<div id="blog">
<div id="post">
//content
</div><!-- end post -->
</div><!-- end blog -->
</div><!-- end blog-container -->
任何可能导致问题的想法？
预计到达时间:JSFiddle
最佳答案
如果元素包含 float 元素，则包装元素需要 overflow:auto 或 clear:both; 来获取添加背景所需的高度
在您的情况下，您可以将 overflow:auto 或 clear:both 添加到 #blog-container 或者您可以添加它作为一个单独的类，如下所示:
这里有几行你可以用来向你的 css 添加 clearfix 声明，你可以将该类添加到任何具有 float 元素的元素:
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
clearfix 取自:Html5Boilerplate
这里有一个关于 clearfix 差异的特别好的问题:which method of clearfix is best (检查答案二)
关于php - 博客容器未显示正确的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12663826/