Pb avec image de fond css qui ne s'affiche pa

Fermé

virginie - 11 mai 2008 à 13:27
Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 - 11 mai 2008 à 19:57

Bonjour,

Je souhaite utiliser une image de fond pour la creation d'un site mais celle-ci ne s'affiche pas alors qu'elle semble être bien apellée dans mon css. Quelqu'un peut-il m'aider à comprendre ?
Merci de votre aide.

voici mon html :
<html>
<head><title>Ginger Sisters, vêtements éthiques pour femmes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CSS/structure.css" rel="stylesheet" type="text/css" />
</head>
</html>
<body>
<div id="cadre">
<div id="haut"></div>
<div id="bas">
<div id="bouton1"><a href=""><img border="none" alt="ginger sisters" s="images/myspace.gif"></a></div>
<div id="bouton2"><a href=""><img border="none" alt="collection ethique" src="images/collection.gif"></a></div>
<div id="bouton3"><a href=""><img border="none" alt="points de vente" src="images/points-de-vente.gif"></a></div>
<div id="bouton4"><a href=""><img border="none" alt="commandez vos vêtements éthiques" src="images/commande.gif"></a></div>
<div id="bouton5"><a href=""><img border="none" alt="contactez-nous" src="images/contacts.gif"></a></div>
<div id="bouton6"><a href=""><img border="none" alt="le blog Ginger Sisters" src="images/blog.gif"></a></div>
</div>
</div>
</body>
</html>

et voici mon css :
html{
margin: 0px;
padding: 0px;
}

body{
font-size : 100%;
background-color : #FFFFFF;
margin: 0px;
padding: 0px;
}

#cadre{
width: 900px;
height: 500px;
position: absolute;
left: 50px;
top: 50px;/*gere la hauteur du placement sur la page de manière absolu*/
}

#haut{
width: 900px;
height: 430px;
background-image: url (cadre.gif);
background-repeat: no-repeat;
}

#bas{
width: 900px;
height: 70px;
position:fixed !important;
background-color: #735F69;
}

#bouton1{
width: 125px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 35px;
margin-right: 15px;
float: left;
}

#bouton2{
width: 125px;
margin-top: 20px;
margin-left: 11px;
margin-right: 20px;
margin-bottom: 20px;
float: left;
}

#bouton3{
width: 125px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
float: left;
}

#bouton4{
width: 125px;
margin-top: 20px;
margin-left: 11px;
margin-right: 10px;
margin-bottom: 20px;
float: left;
}

#bouton5{
width: 125px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
float: left;
}

#bouton6{
width: 125px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
float: left;
}

L'image devrait donc s'afficher dans <div "id=haut"> mais rien n'y fait !
Merci encore pour votre aide

Virginie

A voir également:

Pb avec image de fond css qui ne s'affiche pa
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Image libre de droit gratuite google - Guide
Image de profil - Guide

2 réponses

Réponse 1 / 2

Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 189
11 mai 2008 à 14:01

bonjour,
J'ai mis en gras le bug et la correction en gras.
Ton code:

#haut{
width: 900px;
height: 430px;
background-image: url (cadre.gif);
background-repeat: no-repeat;
}

remplace par:

#haut{
width: 900px;
height: 430px;
background-image: url ('cadre.gif');
background-repeat: no-repeat;
}

il manque simplement les ' ' (apostrophes): background-image: url ('cadre.gif');
Je ne sais pas pourquoi mais les ' ' ne se mettent pas en gras dans le code.
Bonne journée

virginie
11 mai 2008 à 14:12

Merci Nico, mais ca ne fonctionne toujours pas !
Aurais-tu une autre explication ?
Virginie

Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 189 > virginie
11 mai 2008 à 14:17

oui, voici :
code actuel:

background-image: url ('cadre.gif');

code modifier:

background-image:url('cadre.gif');

il y avait les espace en les : url ( que je n'avais pas vu avant !

Bonne journée

virginie > Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016
11 mai 2008 à 14:24

Merci mais cela ne fonctionne toujours pas.
Est-ce que cela peut venir de mon image ? Elle est pourtant en RVB et s'affiche bien lorsque je l'ouvre avec IE.
Sinon, aurais-tu encore une autre solution ?
Merci.
Virginie

Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 189 > virginie
11 mai 2008 à 14:30

as tu l'adresse du site en question?

Ton image: c'est un image qui sert de fond sur toute la page?
ou que sur une partie, la ou tu auras mis <div haut>?

Réponse 2 / 2

Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 189
11 mai 2008 à 14:50

J'ai différents essai et ça fonctionne très bien de mon coté.

Vide le cache internet: Ctrl+F5.

virginie
11 mai 2008 à 17:26

hum ! je dois avoir des problèmes car même en vidant le cache, rien ne s'affiche. L'image est uniquement dans la div "haut".
Je vais essayer de visualiser ca sur un autre ordi.
Merci pour ton aide.
Virginie

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 517 > virginie
11 mai 2008 à 18:23

Salut à tous,
Moi je met des " " (double cotes) ou guillemets, ex:

background-image: url("../Dossier/Images/image.gif");

Essaie, ça ne mange pas de pain et chez moi ça a toujours fonctionné !

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 189 > virginie
11 mai 2008 à 19:57

re:

c'est normal que ton image soit QUE dans <div haut>.

si tu veux que ton image soit en fond de page c'est dans:

body{
font-size : 100%;
background-image:url('cadre.gif');
margin: 0px;
padding: 0px;
}

Bonne soirée

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

=Si la cellule A1 a du texte = B1 devient couleur

Comment enlever le rouge sur la photo svp ?

Fond d'écran carousel xiaomi

Résolution d'une image 500 pixels largeur