Question

我是堆叠溢出的新手，但我已经使用CSS大约一年半了。

我似乎无法让背景属性完全用于我的div class =“content”。最后我只想使用background-image在ur上放置背景图片：url（'home_bg.png'）;.

我已经用Google搜索了问题并查看了堆栈溢出，但到目前为止我发现的问题没有帮助。我将所有背景图像保存在与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〜

Answer 1

这是你的内容div。它没有指定的高度，它的锥形元素是“不流动”（浮动或位置：绝对）。这有效地产生0px高度的内容div。根据不同，您可以添加此样式规则：

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

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

Answer 2

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

Answer 3

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

CSS背景图像故障排除

3 个答案: