Image en Background n'apparait pas ou mal
BorisZeHachoir
-
kiyomasa Messages postés 312 Date d'inscription Statut Membre Dernière intervention -
kiyomasa Messages postés 312 Date d'inscription Statut Membre Dernière intervention -
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;
}
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
- Facebook rencontre n'apparait pas - Forum Facebook
- Faites en sorte que la cellule a1 affiche exactement ce qui est montré sur cette image. quel mot apparaît en b1 ? - Forum Excel
- =Si la cellule A1 a du texte = B1 devient couleur - Forum Excel
2 réponses
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:
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 */
