故障排除CSS background-image

我是堆栈溢出的新手，但我一直在使用CSS大约一年半的时间。故障排除CSS background-image

我似乎无法得到背景属性工作在我的div class =“content”。最终，我只是想在背景图像上使用background-image：url（'home_bg.png'）;.

我谷歌搜索了这个问题，并在堆栈溢出，但我迄今发现的问题没有帮助。我将所有背景图像保存在与CSS相同的文件夹中，并且我已经双重检查了我的文件名是否正确。我知道div在CSS中的定位正确，因为其他属性（如宽度和边距）正常工作。

我甚至试图把一个丑陋的背景颜色，只是为了看看它会工作。它没有。我相信这可能只是一些小事，但我找不到它。

的HTML：

<body> 
<div class="navbar"> ... </div> 
<div class="content"> 
    <div class="box" id="twitter"> ... </div> 
    ... 
    ... 
</div> 
<div class="footer> ... </div> 
<body>

的CSS：

body { 
    background-color: #000; 
    background-repeat: repeat; 
    margin: 0px; 
    padding: 0px;} 
div.content { 
    background-image: url("home_bg.png"); 
    margin: 0 auto; 
    position: relative; 
    top: 84px; 
    width: 1024px;}

页位于here有没有什么帮助了。

在此先感谢！〜Tatianna〜

来源

2011-11-04 TatiannaWS

你所有的div都是浮动的，所以你的内容没有高度 –

这是你的内容div。它没有指定的高度，它的锥形元素是“流出”（浮动或位置：绝对）。这有效地产生了0px高度的内容div。你可以添加这种风格规则：

html, body, .content {height:100%;}

不是一个解决方案，而是一个开始。

来源

2011-11-04 01:02:33

当然，这是我没有尝试的一件事。非常感谢你！ – TatiannaWS

您看到的行为是div.content没有高度，因为包含的元素都是浮动的。有很多方法可以解决这个问题。最快的方法是添加一个用于居中的父元素（margin：auto）和float div.content。浮动元素将占据其嵌套元素的高度。您也可以将overflow：hidden应用于div.content，但您需要调整您的布局和CSS以适应该功能。

来源

2011-11-04 01:04:40 SDG

这与你使它变得相对有关。如果我将位置属性更改为“固定”或将高度设置为“500px”，则会显示背景。如果/当我能理解为什么会发生这种情况时，我会通知你。

来源

2011-11-04 01:09:45

故障排除CSS background-image

回答

相关问题