image background dans un container

[ortolojf]

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

[SuperCureuil]

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

@+

[ortolojf]

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

@+

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

[e-kiwi]

une image en background n'est pas redimensionnable

[ortolojf]

une image en background n'est pas redimensionnable

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