L'image entière ne montrera pas

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

Il ya une image (blixt.png) que je veux montrer comme arrière-plan, peu importe combien de temps le contenu <div id="content"> est! Si c'est court un peu de l'image montre et plus le texte est long, plus ça se voit. Comment puis-je corriger afin de montrer l'image entière, peu importe quoi? Je ne veux pas définir la hauteur.

Answer 1

Vous pouvez définir une hauteur minimale, mais cela nécessitera que vous définissiez un correctif de hauteur IE car min-height ne fonctionnera pas dans IE.

Le problème ici est assez évident. Vous avez un élément avec une image d'arrière-plan mais pas de hauteur, alors bien sûr, il va par défaut à la hauteur du contenu à l'intérieur.

Vous pouvez mettre une hauteur sur l'élément #content ou déplacer l'image d'arrière-plan vers le corps.

essayer ceci dans le corps css:

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