Изображение целиком не будет отображаться

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

У меня есть изображение (blixt.png), которое я хочу показать в качестве фона независимо от того, как долго содержимое внутри <div id="content"> есть! Если его короткий только немного изображения показывает и дольше текст, тем больше он показывает. Как я могу исправить, чтобы он отображал весь образ независимо от того, что? Я не хочу устанавливать высоту.

Answer 1

Вы можете установить минимальную высоту, но для этого потребуется установить настройку высоты IE, так как min-height не будет работать в IE.

Проблема здесь довольно очевидна. У вас есть элемент с фоновым изображением, но на нем нет высоты, поэтому, конечно, он будет по умолчанию превышать высоту содержимого внутри него.

Вы можете поместить высоту в элемент #content или переместить фоновое изображение на тело.

попробовать это в CSS тела:

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