Php 博客容器没有显示正确的背景_Php_Css_Html_Containers

Php 博客容器没有显示正确的背景

php css html

Php 博客容器没有显示正确的背景,php,css,html,containers,Php,Css,Html,Containers,我希望我的博客容器与整个页面有一个单独的背景。但是，它以wood.png作为背景，而不是bg.png。我正在使用以下命令： CSS HTML/PHP <body> <div class="above"> <div id="blog-header"> <div class="logo"> <a href="<?php bloginfo('url'); ?>"><img src="<?php echo

我希望我的博客容器与整个页面有一个单独的背景。但是，它以wood.png作为背景，而不是bg.png。我正在使用以下命令：

CSS

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 -->








//内容

你知道是什么导致了这个问题吗

ETA:

如果一个元素包含浮动元素，则包装元素需要一个

溢出：自动或清除：两者皆有要获得需要添加背景的高度
在本例中，您可以将溢出：自动
或清除：两者都
添加到#博客容器
，也可以将其作为单独的类添加，如下所示：
这里有几行很好的代码，可以用来向css中添加clearfix声明，您可以将该类添加到任何包含浮动元素的元素中：
/*
 * 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取自：
这里有一个关于clearfix差异的特别好的问题：（检查答案二）
您可能需要在身体上设置一些填充（或者将div宽度设置为95%，而不是100%）。看起来div将占据整个屏幕。
@AdamPlocher抱歉，原始问题已编辑。不需要清除：两者都<代码>溢出：auto足以使容器扩展以包含其浮动子级。
/*
 * 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;
}