Whole image won't show

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

There's a image (blixt.png) that I want to show up as background no matter how long the content inside <div id="content"> is! If its short only a bit of the image shows and as longer the text the more it shows. How can I fix so it shows the whole image no matter what? I don't want to set height.

Answer 1

You can set a min height, but that will require you to set a IE height fix because min-height won't work in IE.

The problem here is pretty obvious. You have an element with a background image but no height on it, so of course it's going to default to the height of the content inside it.

You can either put a height on the #content element, or move the background image to the body.

try this in the body css:

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