CSS et plusieurs images de fond

[nnx]

Bonjour,

Le CSS3 n'étant pas encore répandu :/ , je cherche une solution pour afficher 2 images background avec répétition sur l'axe des y. La première image serait aligné à droite, et la deuxième serait aligné à gauche.

J'ai donc placé un background dans mon div principal, et un autre dans le style de la balise body.

Le problème c'est que la balise div principale s'agrandit en fonction du contenu, et si ce contenu est moins haut que la taille de la fenêtre du navigateur, et bien l'image n'est pas répété sur toute une partie de l'écran. Ce problème n'apparait pas avec le background de body qui s'affiche sur toute la hauteur de la zone cliente du navigateur.

Si vous avez une idée, je suis preneur

PS : J'ai essayé de mettre le background 1 dans le body et le background 2 dans le style de la balise html, mais dans ce cas là seul le background de la balise html apparait . :cry:

 

[thomaspirit]

Effectivement pour les images de fonds, le CSS2 n'est toujours très efficace :

Dans ton style du div mets :
width: 100%;
margin: 0;
padding: 0;
background-color: transparent;
background-image: etc...

Ajoute ensuite un autre div pour appliquer des styles de marges et padding

C'est mieux ?

 

[nnx]

Et non, ça ne suffit pas :wink: L'image n'est toujours pas répétée jusqu'en bas de la fenêtre.

Vivement les CSS3

 

[thomaspirit]

Tu aurais pas un margin ou padding dans ton body ?

sinon force les dans ta css - je ne vois que ça...

Et tout bètement rassembler tes 2 images en 1 seule pas jouable ?

 

[Yvel]

une image en background du body
et une div conteneur de l'ensemble de la page
position absolue 0 0
margin 0
padding 0
background image repeat
largeur fixe

 

[nnx]

thomaspirit,

ni marging, ni padding. J'ai pensé rassembler mes 2 images, mais ça fera une image d'un poids légèrement supérieur (à vérifier).

Yvel,

Jai déjà un div conteneur (je dois vérifier s'il est positionné comme ton exemple) mais le div ne fait pas la hauteur complète de la fenêtre. Je rappelle que mon cas se produit lorsqu'il n'y a pas assez de contenu pour "pousser" le pied de page jusqu'en bas de la fenêtre.

Merci à tous. Je vais juste faire attention à remplire suffisament la page

 

[thomaspirit]

thomaspirit,

ni marging, ni padding. J'ai pensé rassembler mes 2 images, mais ça fera une image d'un poids légèrement supérieur (à vérifier).

Yvel,

Jai déjà un div conteneur (je dois vérifier s'il est positionné comme ton exemple) mais le div ne fait pas la hauteur complète de la fenêtre. Je rappelle que mon cas se produit lorsqu'il n'y a pas assez de contenu pour "pousser" le pied de page jusqu'en bas de la fenêtre.

Merci à tous. Je vais juste faire attention à remplire suffisament la page

Le problème de ta solution se situe au niveau des différences de résolutions d'écran. Si tu forces ton div à 700px de hauteur cela conviendra pour du 1024*768 mais fera une barre de nav inutile pour du 800*600 et ne conviendra pas pour du 1200*800 etc...

Perso je tenterai le coup en rassemblant les 2 images, si l'image se répète, la page se chargera quand même rapidement et le css sert à ça : mettre en cache la présentation alors pourquoi s'en priver ??