Image en Background n'apparait pas ou mal

Fermé

BorisZeHachoir - 13 déc. 2010 à 09:44
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 - 13 déc. 2010 à 13:18

Bonjour,

Je cherche a avoir une image e background qui recouvre tout le temps le fond.

Je ne comprends pas pourquoi mon image de fond ne s'affiche-t-elle plus?

J'ai vérifié et revérifié le code, il n'y a pas de faute. je ne sais plus comment faire, un peu désespéré en fait...

Un bon samaritain?

Merci d'avance.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta name="google-site-verification" content="O93vfKlpvmIBispYEDHs8UF4ekt7tprbfHGRu59GxdM" />
<meta name="msvalidate.01" content="F6C49237AE5340F44BBACC9F91DB0984" />
<title>{TITRE}</title>
<meta http-equiv="content-type" content="text/html"/>
<meta name="identifier-url" content="www.ndigo.fr" />
<META NAME="DESCRIPTION" CONTENT="{DESCRIPTION}">
<META NAME="KEYWORDS" LANG="fr" CONTENT="{KEYWORDS}">
<META NAME="LANGUAGE" CONTENT="FR">
<META NAME="ROBOTS" CONTENT="index, follow, all">
<META NAME="GOOGLEBOT" CONTENT="index, follow, all">
<META NAME="AUTHOR" CONTENT="Ugo DI CREDICO">
<META NAME="COPYRIGHT" content="© N'DIGO all rights reserved">

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" charset="ISO-8859-1" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/galerie_photo.css" rel="stylesheet" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pikachoose.js"></script>
<script type="text/javascript" src="js/mootools-core.js"></script>
</head>

<body>
<div id="arriere" src="images/fond.jpg" alt="fond"></div>
<img class="logo" src="images/titre.png" alt="titre"/>

<ul id="menu_horizontal">
<li><a href="index.php?lien=accueil"><img class="menu" height="60px" width="80px" src="images/accueil.png" alt="Accueil" border="0"/></a></li>
<li><a href="index.php?lien=visite"><img class="menu" height="60px" width="80px" src="images/visite.png" alt="Visite" border="0"/></a></li>
<li><a href="index.php?lien=acces"><img class="menu" height="65px" width="80px" src="images/acces.png" alt="Acces" border="0"/></a></li>
<li><a href="index.php?lien=region"><img class="menu" height="75px" width="80px" src="images/region.png" alt="Région" border="0"/></a></li>
<li><a href="index.php?lien=contact"><img class="menu" height="65px" width="80px" src="images/contact.png" alt="Contact" border="0"/></a></li>
</ul>

<div id="texte">{CORPS}</div>

</body>
</html>

CSS:

html,body {
margin : 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
padding: 0;
width:100%;
height:100%;
text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
font-family: Tahoma, Geneva, sans-sherif;
font-size: medium;
}

#arriere {
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
height : 100%;
width : 100%;

}
#arriere img {
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#arriere p {
position: absolute; /* placement du texte par-dessus l'image */
color: white;
}

A voir également:

Image en Background n'apparait pas ou mal
Clé usb n'apparait pas - Guide
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum The Gimp
Supprimer sélectivement une couleur d'un document (?) - Forum Word

2 réponses

Réponse 1 / 2

gavroch74 Messages postés 65 Date d'inscription vendredi 27 février 2009 Statut Membre Dernière intervention 12 mars 2011 13
Modifié par gavroch74 le 13/12/2010 à 10:30

Salut !!
Tu mais ton image de fond dans un div donc tu veux ton image seulement dans le fond du div ?
Dans ton css mais la ou tu veux ton image:

background-image:url(img/imagedefond.jpg);  /* lien de ton image */ 
background-repeat: repeat-x ;   /* x répétition horizontal ou repeat-y vertical uniquement et no-repeat pour aucune répétition */

Réponse 2 / 2

kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 5
13 déc. 2010 à 13:18

tu crée la class, comme dit par gavroch .

ensuite, cette class il faut l'appliqué à body

--> <body class="ta classe">

<div></div>
<div></div>
<div></div>
<div></div>

</body>

Discussions similaires

PIX

Facebook rencontre introuvable

Comment enlever le rouge sur la photo svp ?

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

Supprimer une couleur d'une image