Bonjour,

Voila comme ca fait des heures que je tourne en rond sans comprendre le problème je demande aux grands maîtres d'aider un petit zero-boulet dans la détresse.

Je veut mettre une image "wanted.jpeg" dans une balise <div> (class="ban").

.ban
{
background-image: url("wanted.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 0px;
}

Cette image se trouve dans le même dossier que mon code CSS.

Mon dossier CSS porte la bonne extension et fonctionne sur mon code html (j'arrive a changer la couleur de mes liens). J'ai essayé de mettre l'image dans "body" sans resultat. J'ai essayé avec une seconde image jpeg, dans .ban puis dans "body" sans resultat non plus.

Lorsque que je met l'image sur xhtml dans ma balise <div> avec <img scr="wanted.jpeg", ca marche. Mais je croit qu'on doit pouvoir l'afficher seulement avec CSS .....

Voila mon problème

Salut, pourrais tu donner l'arborescence de tes fichiers Stp:

ton fichier html, ton css et ton image sont ils tous dans le même dossier?

Si tu mets <img src="wanted.jpeg" alt="" /> cela veut dire que ton fichier html et ton image sont dans le même dossier.
Si ce n'est pas le cas il faut mettre
background-image: url(../wanted.jpeg);

Oui tout les fichiers (html, CSS et jpeg) sont dans le même dossier (dossier nommé site qui se trouve sur mon bureau et qui ne comporte aucun sous dossier).

Je suis arrivé a mettre l'image avec xhtml <img scr="wanted.jpeg"> mais je veut afficher l'image seulement avec CSS (grâce a la class .ban de ma balise <div>) comme marqué dans le cour d'apprentissage. Mais je n'y arrive pas et je ne comprend toujours pas pourquoi :/.

I/ L'erreur ne semble pas provenir de la :

<div class="ban">
</div>

II/ Pas de la non plus :

.ban
{
background-image: url("wanted.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 0px;
}

III/ Le code CSS influe sur le code HTML (donc ca ne vient pas de la balise link non plus)

<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="Design.css" /> //désign CSS étant mon fichier CSS.


IV/ L'image se charge normalement avec <img scr="wanted.jpeg">. Et le fichier CSS provient du même dossier que l'image et que le fichier HTML.

Je précise que pour faire les test CSS je supprime <img scr="wanted.jpeg"> de ma balise <div> sur le code HTML. Mais il me semble que cela n'a aucune incidence puisque CSS devrait pouvoir afficher seul l'image au même titre que faire un background-color : black ; (ca marche ca, donc je comprend encore moins mon problème d'image :().

Lorsque je garde l'affichage par HTML et que je combine le code CSS, j'obtient le petit carré (avec carré rouge, rond bleu et triangle vert) lorsqu'une image ne peut pas s'afficher sur internet.

Je vient a l'instant de faire plusieurs autres essai et plus rien ne marche (j'arrive plus a afficher mes images avec XTML et src). J'ai donc fait de nouvelles images pour tester (car j'ai cru a un moment que c'est parce que j'avait modifié leur nom - aux images - que ca me faisait ca) et ca ne marche plus et j'obtient une petite croix rouge.

Je sent que je vais devoir repartir de zéro (heureusement j'était pas très loin) car je ne comprend plus rien a cette histoire.

Lut

Il est possible que ton image ne s'affiche pas dans le div#ban si celui-ci est vide....

En fait la raison est très simple. Il faut que tu donnes une dimension à ta div. La dimension de ton image par exemple.

Si celle-ci fait 100px de largeur et 200px de hauteur, tu peux rajouter width: 100px; et height: 200px; dans ta div.

Evidemment, tu peux mettre des dimensions plus grandes ou plus petites (pas obligé de mettre celle de ton image) mais au moins mettre des dimensions. Ca marchera très certainement.

Si tu met les dimensions exacte de ton image, alors ta div sera recouverte de ton image et donc le background-repeat et le background-position ne servent plus à rien.

Le background d'un élément ne peut s'afficher que sur les dimensions dudit élément, pas au-delà, et non l'inverse, à savoir que les dimensions de l'élément ne varient pas selon le background spécifié.

En effet il fallait que je donne une dimension a ban :). Merci beaucoup car mine de rien j'ai galéré très lomgtemps avec cette affaire.

Et puis j'aurait pu galéré encore plus en mettant .jpeg au lieu de .jpg (c'est pour ca qu'a la fin plus aucune image ne s'affichait avec XHTML non plus).

En tout cas merci encore !