image background dans un container

Discussion dans 'Demandes d'avis et de conseils sur vos sites' créé par ortolojf, 31 Mars 2007.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 645
    J'aime reçus:
    38
    Bonjour
    Pour une assoc, pour qui je fais du développement html et php.

    J'ai un container entre un <div> et un </div>, ce container contient diverses choses qui lui donnent une dimension en x et y, pas de problème ( Je suis obligé de mettre un <hr> après une série de container float : left; , pour que le container initial prenne bien la dimension qui lui est alloué par son contenu. )

    Donc, voilà ma question: ce container initial doit contenir une image jpeg en background, ce que je fais de la manière classique, dans le fichier style.css

    div.<classe_du_container> {
    background-image : url(pathname_du_fichier_jpg);
    background-repeat : no-repeat;
    background-position : top left;
    <...>
    }

    Donc, je veux, à la fois 1) que les containers contenus dans ce container initial, héritent de l'image en background sans déformation, ce qui est bien le cas sans rien déclarer dans les classes de ces containers fils, puisque ces containers héritent par défaut du container initial père, et 2) que l'image en background du container initial père, soit contenue entièrement dans ce container père, donc que sa largeur épouse celle du container père.

    Théoriquement, le livre de Raphaël Goetter "Design en CSS2" ( ou un titre comme çà, je ne l'ai pas sous la main maintenant ), indique que la propriété bacground-position peut accepter un pourcentage, donc en mettant 100% en plus de top left, je n'arrive pas plus à obtenir que l'image soit de même dimension que le container père.

    Donc, voilà mon problème: Etant donné une image en background dans un container, comment faire pour qu'elle s'affiche entièrement dans le container, sans qu'il n'y ait des parties de l'image qui n'apparaissent pas à l'écran ? ( Ceci en largeur actuellement, évidemment on ne peut pas exiger que les proportions de l'image soient modifiées pour s'adapter à celles du container... )

    Merci beaucoup de vos réponses.

    Jean-François Ortolo
     
  2. SuperCureuil
    SuperCureuil WRInaute impliqué
    Inscrit:
    9 Mars 2007
    Messages:
    567
    J'aime reçus:
    0
    Salut,

    Ben, je ne suis pas sûr de bien comprendre ... pour que l'image apparaisse entièrement, il faut simplement qu'elle ait au minimum les mêmes dimensions (<=) que le container qui la contient ... après tout est question de positionnement dans ce container :wink:

    @+
     
  3. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 645
    J'aime reçus:
    38

    Bonjour SuperCureuil

    Ce que j'entend par "l'image apparaît entièrement", c'est qu'il n'y ait pas d'endroits de l'image, qui existent, et qui soient en dehors du container.

    Autrement dit, ce que je voudrais, c'est que l'image s'ajuste aux dimensions du container, au moins en largeur.

    Les dimensions du container sont évidemment fixées par son contenu, et donc ne sont pas influencées par l'image en background.

    J'ai testé le paramètre pourcentage ( 100% ) de la balise CSS background-position, mais apparemment ça ne change rien quant à l'apparence de l'image sur l'écran. L'image couvre tout le container comme avant, mais il y a les côtés droits et bas de l'image, qui sont au delà du container, donc invisibles.

    C'est également le cas avant, quand je ne met que: "top left" pour la balise background-position. Et quand je met "top center", on voit le centre de l'image, mais les bords débordent du container, et sont donc invisibles.

    Dans mon cas, l'image est au départ plus grande que le container, donc on ne voit que la partie de l'image, qui est sous le container. Le reste est au delà du container, donc invisible.

    Moi, ce que je voudrais, c'est que l'image s'ajuste en largeur à la dimension du container, de façon à ce qu'on voit l'image dans son intégralité, en largeur.

    Merci beaucoup de me dire si c'est possible, en CSS, d'obtenir un tel résultat;

    Merci beaucoup de ta réponse.

    Jean-François Ortolo
     
  4. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    une image en background n'est pas redimensionnable
     
  5. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 645
    J'aime reçus:
    38

    Bonjour e-kiwi

    Mais dans ce cas, à quoi sert l'attribut pourcentage ( par exemple 100% ), de la balise CSS background-position ?

    Merci beaucoup de ta réponse.

    Jean-François Ortolo
     
Chargement...
Similar Threads - image background container Forum Date
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
La background image du site et la vue en cache de google Débuter en référencement 26 Mars 2018
Background image sous conditions Développement d'un site Web ou d'une appli mobile 8 Avril 2013
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
Background-image qui ne s'affiche plus suite REDIR htaccess URL Rewriting et .htaccess 14 Décembre 2011
background-image ou img pour une image Développement d'un site Web ou d'une appli mobile 21 Octobre 2010
CSS 2 image en background Développement d'un site Web ou d'une appli mobile 20 Octobre 2010
Image en Background ... Développement d'un site Web ou d'une appli mobile 3 Octobre 2010
Newsletter html et background-image - prise de tête inside Développement d'un site Web ou d'une appli mobile 21 Septembre 2010
inserer une image dans le background de mon site Développement d'un site Web ou d'une appli mobile 30 Juin 2010
2 background-image dans une div Développement d'un site Web ou d'une appli mobile 9 Juin 2010
Images background sont elles référencées ? YouTube, Google Images et Google Maps 30 Avril 2010
Problème affichage background-image sur newsletter Développement d'un site Web ou d'une appli mobile 28 Septembre 2008
Comment mettre une image en Background avec tinymce Développement d'un site Web ou d'une appli mobile 13 Septembre 2008
Images en background et Outlook 2007 Développement d'un site Web ou d'une appli mobile 24 Juin 2008
[résolu] Problem avec un background image Développement d'un site Web ou d'une appli mobile 30 Décembre 2007
Image de background : optimisation ou accessibilité Référencement Google 27 Décembre 2007
callé div sur une image background...IE ?? Développement d'un site Web ou d'une appli mobile 15 Mai 2007
CSS >> Image de background et lien Développement d'un site Web ou d'une appli mobile 4 Décembre 2006