CSS: problèmes d'arrière-plan. Est-ce possible?

Question

Merci pour votre aide à l'avance.

Voici PNG de la mise en page: Website Layout

La deuxième partie (avec le fond gris foncé) me donne des problèmes. Voici le CSS que j'utilise pour l'arrière-plan.

#mainbg { 
width:100%; 
height:450px; 
padding-top:25px; 
background-image:url(../images/mainbg.png); 
background-color:#303030; 
background-position:top; 
background-repeat:repeat-x; 

}

Les écrans de fond, (bien qu'il ne s'affiche à moins que je fixe un min-hauteur, ce qui ne fonctionne pas pour IE6 de toute façon), et tout fonctionne, jusqu'à ce que je contenu s'étend au-delà de dire 450px. Ensuite, le contenu déborde dans le pied de page et l'arrière-plan ne s'étire pas. Je ne veux pas que l'IMAGE s'étende, juste pour que l'image se termine et que la couleur d'arrière-plan continue comme arrière-plan uni au contenu. Comment régler la hauteur de l'arrière-plan de cette div pour qu'elle s'étende en fonction du contenu, tout en affichant uniquement l'image d'arrière-plan une fois sur l'axe y (tout en répétant sur l'axe des x).

Je joue avec d'autres tailles et hérite et autos, mais le réglage de l'un d'eux signifie simplement que l'image ne s'affiche pas.

Aide, cela me rend fou!

Answer 1

Vous avez deux problèmes:

1. Il vous oblige à définir une hauteur minimum parce que vous n'avez pas encore contenu. Imagine un div vide. Il sera aussi large que l'écran, puisqu'il est au niveau du bloc, mais aussi grand que le texte, ce qui n'est rien. Vous n'avez donc pas besoin d'une hauteur minimale, vous avez juste besoin d'une hauteur ou d'un contenu réel.

2. L'arrière-plan occupera uniquement l'espace occupé par la div. Si la couleur et l'image s'arrêtent, cela signifie que le div s'est arrêté. Essayez réglage « overflow: scroll » juste pour voir où la coupure est vraiment ..

Une chose qui vous rendra la vie beaucoup plus facile avec CSS est d'essayer de ne pas mettre tout à la fois et faire la mise en page que est bon, alors s'inquiéter des cosmétiques comme les images de fond et les couleurs. Essayez de donner à la div gênante une couleur de fond orange et une bordure bleue. Cela vous donnera une idée parfaite du moment où les choses commencent et s'arrêtent. Une fois que vous savez que la couleur est alignée, essayez l'image d'arrière-plan.