博客包含器未顯示適當的背景

我希望我的博客容器可以與頁面整體具有不同的背景。但是，它將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 -->

任何想法可能會造成什麼問題？

ETA：JSFiddle

來源

2012-09-30 AMC

究竟是什麼問題？ –

@AdamPlocher對不起，原創編輯。 – AMC

如果一個元件被包含浮動元件，所述纏繞元件然後需要一個overflow:auto或clear:both;得到它需要添加背景給它的高度。

在你的情況，你可以添加任何如下圖所示的overflow:auto或clear:both到#blog-container也可以將其添加爲一個單獨的類：

這裏有幾個漂亮的線，你可以使用一個clearfix聲明添加到您的CSS中，您可以在類添加到在它浮動元素任何元素：

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

這裏是一個額外的不錯q問題在談論clearfix差異：which method of clearfix is best（檢查答案二）

來源

2012-09-30 18:34:03 Krycke

真的不需要'清楚：兩個'; 'overflow：auto'就足以使容器展開以包含浮動子元素。 –

正確，編輯以反映這一點。 – Krycke

'溢出：自動'做了伎倆，謝謝。 – AMC

您可能需要在您的身體上設置一些填充（或將div寬度設置爲95％而不是100％）。它看起來像div將佔據整個屏幕的寬度。

來源

2012-09-30 18:41:15

博客包含器未顯示適當的背景

回答

相關問題