整个图像不会显示

Question

* { margin: 0; padding: 0; }

body {
  margin: 8px auto;
  background: #20272D;
  width: 900px;
}

body, td, input, textarea {
  font: 11px Tahoma;
  color: #DDD;
}

#content {
  width: 400px;
  margin: auto;
  background: url(img/blixt.png) 0px 18px no-repeat;
  padding-left: 25px;
}

无论<div id="content">内的内容有多长，我都希望将图像（blixt.png）显示为背景！如果它只显示图像的一小部分，并且文本越长，它显示的越多。我该如何修复以便无论如何都能显示整个图像？我不想设置身高。

Answer 1

您可以设置最小高度，但这需要您设置IE高度修复，因为min-height在IE中不起作用。

这里的问题非常明显。你有一个背景图片但没有高度的元素，所以当然它会默认为里面内容的高度。

您可以在#content元素上放置一个高度，或者将背景图像移动到正文中。

在body css中尝试这个：

background-image: url(img/blixt.png) no-repeat;
background-color: #20272D;