Mettre une image de fonds dans une DIV

Résolu/Fermé
philippef - Modifié le 7 août 2018 à 14:36
 philippef - 7 août 2018 à 17:04
bonjour,

je n'arrive pas à mettre une image de fonds dans ma balise DIV
le code html
 <div id="bandeau">
  <div id="b1"><img src="images/blason Troissy.jpg" alt="" title="Cliquez ici pour afficher le site en français" id="imgbandeau" onclick = "javascript:cacher('menuD');montrer('menuF')"/></div>
  <div id="b2">JUMELAGE <br> TROISSY ~ PARTENHEIM</br></div>
  <div id="b3"><img src="images/blason Partenheim.jpg" alt="" title="Cliquez ici pour afficher le site en allemand" id="imgbandeau2" onclick = "javascript:cacher('menuF');montrer('menuD')"/></div>
 </div>


le code css
/*  LE BANDEAU   */
#bandeau { overflow:auto; }
#b1 { width : 20%; float:left; }
#imgbandeau { width:30%; margin-left:37%; float:left; cursor: pointer; }
#b2 { width : 60%; 
        float:left;
        text-align:center; 
        font-size:2em; 
        background-image:url("images/vignes.jpg"); background-repeat:no-repeat;  
  }
#b3 { width : 20%; float:left; }
#imgbandeau2 { width:33%; margin-left:33%; margin-top:0%; float:left; cursor: pointer;  }


EDIT: Correction des balises de code pour avoir la coloration syntaxique !

je ne vois pas où est problème !!
merci de votre aide
A voir également:

4 réponses

Utilisateur anonyme
Modifié le 7 août 2018 à 14:39
Bonjour

Attention, les url dans un fichier css sont relatives au fichier css, pas au fichier html qui utilise le css.
Si ton css est dans un fichier situé dans un dossier différent de celui qui contient le html, il faut adapter l'url en conséquence.
0
Nyctaclope Messages postés 5315 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 11 décembre 2022 1 250
7 août 2018 à 14:52
Bonjour,
Es tu sûr de la syntaxe du chemin de ton image ?
src="images/blason Troissy.jpg" ..
Ton dossier images est ici supposé être sous le dossier de la page en cours ?
sinon si images est sous la racine du site ( probable ) il faut src="/images/blason Troissy.jpg"
Ce n'est qu'une idée, et sauf erreur de ma part, toujours possible :-) ..
A+
Nyctaclope
0
Merci pour vos réponses.
J'ai été incomplet dans ma question !!
l'image de fond elle est à mettre dans la balise div id="b2"
le css est dans un dossier styles avec un fichier style.css et l'image vignes.jpg dans un dossier images

pour( résumer ce qui ne colle pas est là :
code html

<div id="b2">JUMELAGE <br> TROISSY ~ PARTENHEIM </br></div>


dans le fichier css

#b2 { width : 60%; float:left; text-align:center; font-size:2em; background-image:url("images/vignes.jpg"); background-repeat:no-repeat; }
0
Utilisateur anonyme
7 août 2018 à 15:07
Pour confirmation suite à la remarque de Nyctaclope, tu parles bien d'image de fond, c'est à dire celle qui figure dans
background-image:url("images/vignes.jpg")
?
Ou tu parles de tes images en général, y compris "images/blason Troissy.jpg" et "images/blason Partenheim.jpg", qui ne sont pas des images de fond au sens où on l'entend en CSS ?
0
oui c'est tout à fait ça !! c'est l'image vignes.jpg qui doit se trouver en fond de la balise id="b2"
0
Utilisateur anonyme
7 août 2018 à 15:18
ton fichier css est-il dans le même dossier que ton fichier html ?
0
la structure du site
dossier Jumelage qui contient :
- un fichier index.php qui contient l'entête du site dont la balise <div id="b2">
- un dossier styles qui contient une feuille de styles .css et une feuille de style pour les médias
- un dossier images qui contient les images
0
Utilisateur anonyme
7 août 2018 à 16:06
Puisque ton fichier css est dans /styles, alors ton
background-image:url("images/vignes.jpg"
va chercher /styles/images/vignes.jpg, alors qu'il faudrait /images/vignes.jpg.
Tu vois pourquoi ça ne marche pas. Vois-tu aussi comment corriger, ou faut-il que je détaille ?
0
j'ai tenté ça : background-image:url(.../images/vignes.jpg); mais pas d'image de la vigne !!!
0