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

virginie -
Nico_ Messages postés 1219 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Pb avec image de fond css qui ne s'affiche pa
Le clavier de mon telephone ne s'affiche plus - Guide
Image iso - Guide
Enlever le fond d'une image - Guide
Comment mettre une vidéo en fond d'écran - Guide
Fond de page word - Guide

2 réponses

Réponse 1 / 2

Nico_ Messages postés 1219 Date d'inscription Statut Membre Dernière intervention 189

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

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

Nico_ Messages postés 1219 Date d'inscription Statut Membre Dernière intervention 189 > virginie

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 189 > virginie

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 Statut Membre Dernière intervention 189

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

Vide le cache internet: Ctrl+F5.

virginie

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 Statut Contributeur Dernière intervention 521 > virginie

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 Statut Membre Dernière intervention 189 > virginie

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

PIX

additionner nombres dans cellules avec texte

Dechiffrer une image caché

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

Cellules en surbrillance selon une TextBox

Votre réponse

Discussions similaires