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

virginie -  
Nico_ Messages postés 1220 Date d'inscription   Statut Membre Dernière intervention   -
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
Configuration: Windows XP
Internet Explorer 7.0

2 réponses

  1.
    Nico_ Messages postés 1220 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
    0
    1. virginie
       
      Merci Nico, mais ca ne fonctionne toujours pas !
      Aurais-tu une autre explication ?
      Virginie
      0
      1. Nico_ Messages postés 1220 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
        0
      2. virginie > Nico_ Messages postés 1220 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
        0
      3. Nico_ Messages postés 1220 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>?
        0
  2. Nico_ Messages postés 1220 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.
    0
    1. 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
      0
      1. txiki Messages postés 6514 Date d'inscription   Statut Contributeur Dernière intervention   609 > 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.
        0
      2. Nico_ Messages postés 1220 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
        0

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses
Cellules,
akalifa -
Raymond PENTIER -

5 réponses
=Si la cellule A1 a du texte = B1 devient couleur
jsecours -
huhh -

8 réponses