CSS et plusieurs images de fond

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par nnx, 18 Novembre 2005.

  1. nnx
    nnx WRInaute occasionnel
    Inscrit:
    22 Janvier 2003
    Messages:
    332
    J'aime reçus:
    0
    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:
     
  2. thomaspirit
    thomaspirit WRInaute discret
    Inscrit:
    24 Mars 2005
    Messages:
    62
    J'aime reçus:
    0
    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 ?
     
  3. nnx
    nnx WRInaute occasionnel
    Inscrit:
    22 Janvier 2003
    Messages:
    332
    J'aime reçus:
    0
    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 :p
     
  4. thomaspirit
    thomaspirit WRInaute discret
    Inscrit:
    24 Mars 2005
    Messages:
    62
    J'aime reçus:
    0
    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 ?
     
  5. Yvel
    Yvel WRInaute occasionnel
    Inscrit:
    5 Juin 2005
    Messages:
    368
    J'aime reçus:
    0
    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
     
  6. nnx
    nnx WRInaute occasionnel
    Inscrit:
    22 Janvier 2003
    Messages:
    332
    J'aime reçus:
    0
    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 ;)
     
  7. thomaspirit
    thomaspirit WRInaute discret
    Inscrit:
    24 Mars 2005
    Messages:
    62
    J'aime reçus:
    0
    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 ??
     
Chargement...
Similar Threads - CSS images fond Forum Date
CSS - Affichage de plusieurs images au passage de la souris Développement d'un site Web ou d'une appli mobile 19 Novembre 2017
Combine images using CSS sprites sur un site Joomla Débuter en référencement 18 Mars 2015
CSS : sélectionner les images flottantes Développement d'un site Web ou d'une appli mobile 15 Février 2013
Arborescence virtuelle, comment conserver les liens images, css, etc URL Rewriting et .htaccess 27 Novembre 2012
CSS Sprites et Google Images Débuter en référencement 29 Décembre 2011
problème url rewriting: css, js et images non chargés URL Rewriting et .htaccess 15 Juillet 2011
Superposition d'images en CSS Développement d'un site Web ou d'une appli mobile 10 Février 2011
[Page Speed] optimisation des images des scripts des css Développement d'un site Web ou d'une appli mobile 11 Janvier 2011
Superposer (??) 2 images en CSS dans des divs Développement d'un site Web ou d'une appli mobile 21 Juin 2009
Menu CSS avec images au survol Développement d'un site Web ou d'une appli mobile 16 Avril 2008
images et texte en css Développement d'un site Web ou d'une appli mobile 29 Novembre 2007
[CSS] "léger" soucis sous Firefox : images invisib Développement d'un site Web ou d'une appli mobile 14 Novembre 2007
probleme avec le css et les images URL Rewriting et .htaccess 11 Mai 2007
Background 2 images en CSS Développement d'un site Web ou d'une appli mobile 20 Novembre 2006
css : images soulignées Développement d'un site Web ou d'une appli mobile 7 Juillet 2006
CSS : Comment supprimer l'interligne entre les images Développement d'un site Web ou d'une appli mobile 27 Juin 2006
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
Unused CSS et outils pour supprimer feuilles de style inutilisées Développement d'un site Web ou d'une appli mobile 27 Avril 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021