Background : toujours aucune solution...

Question

Pages :

8 Dec 2010 à 10:15

Bonjour,

je suis en train de terminer un site internet et je me confronte a un problème majeur sans solution depuis hier, et pourtant j'ai cherché sur énormément de forum.

Je souhaite mettre mon image de fond en "position:absolute" pour qu'elle s'adapte à toutes les résolutions. Quand je fais le test sur IE, ou Chrome, ça fonctionne à merveille.

Par contre quand je le teste sur Firefox, l'image de fond est décalée sur la droite, environ au milieu de l'écran.

mon css:
"#background{
width:100%;
height:100%;
z-index: -999;
position:absolute;
}

mon html:
"<html>...

...<body>
<img src="images/fond8.jpg" alt="" id="background"/>
<div id="content">

<img class="logo" src="images/titre.png" alt="titre"/>

<ul id="menu_horizontal">
<li><a href="index.php?lien=accueil"><img class="menu" height=7% width=7% src="images/accueil.png" border="0"/></a></li>
<li><a href="index.php?lien=visite"><img class="menu" height=7% width=7% src="images/visite.png" border="0"/></a></li>
<li><a href="index.php?lien=acces"><img class="menu" height=7% width=7% src="images/acces.png" border="0"/></a></li>
<li><a href="index.php?lien=region"><img class="menu" height=7% width=7% src="images/region.png" border="0"/></a></li>
<li><a href="index.php?lien=contact"><img class="menu" height=7% width=7% src="images/contact.png" border="0"/></a></li>
</ul>
<div id="texte">{CORPS}</div>
</div>
</body>
</html>"

Je n'ai toujours pas trouvé de solution, et je commence a perdre espoir. Smiley bawling

J'espère en trouver une ici.

Je vous remercie d'avance.

Ugo
Modifié par BorisZeHachoir (13 Dec 2010 - 10:05)

Mabelle

8 Dec 2010 à 11:50

Euh, je ne suis pas sûre de te comprendre là. Smiley confus

Normalement, une image de fond, ça se met en background dans les css

body {
 background-image: url(fond8.jpg);
}

Avec selon le cas, la position, la répétition, etc.

Attention à ton menu, il peut causer des problèmes d'accessibilité.

Note: dans ton code, tu as un " avant #background, est-ce la même chose dans ta page ou c'est une erreur de transcription ?

BorisZeHachoir

8 Dec 2010 à 12:25

Merci pour ta réponse.

le " n'est pas dans mon code, pas de soucis.

Concernant cette image de fond, j'aimerai qu'elle soit toujours entière, quelque soit la définition de l'écran.

Avec mon code, j'arrive a mes fins, sauf sur Firefox, qui me décale l'image de fond, mais je ne sais absolument pas pour quelle raison.

Concernant ta proposition, elle ne fonctionne pas... Je suis dans ce soucis depuis hier, du coup je dois commencer à zapper des erreurs.

Du coup je t'envoie tout mon code html, et la partie du code en css concernant le .body.

<!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" charset="ISO-8859-1"/>
	<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 class="body">

   <div id="content">
   
<img class="logo" src="images/titre.png" alt="titre"/>

				<ul id="menu_horizontal">
<li><a href="index.php?lien=accueil"><img class="menu"  height=7% width=7% src="images/accueil.png" border="0"/></a></li>
<li><a href="index.php?lien=visite"><img class="menu"  height=7% width=7% src="images/visite.png" border="0"/></a></li>
<li><a href="index.php?lien=acces"><img class="menu"  height=7% width=7% src="images/acces.png" border="0"/></a></li>
<li><a href="index.php?lien=region"><img class="menu"  height=7% width=7% src="images/region.png" border="0"/></a></li>
<li><a href="index.php?lien=contact"><img class="menu"  height=7% width=7% src="images/contact.png" border="0"/></a></li>
</ul>
		<div id="texte">{CORPS}</div>
		</div>
</body>
</html>

CSS:

 .body {
	background-image: url(images/fond8.jpg);
}

Chose peut être important à préciser, je travaille avec un page "structure.html", à laquelle toutes mes autres pages se réfèrent.

Que veux tu dire à propos de mon menu?

Merci d'avance.

Ugo

Mabelle

8 Dec 2010 à 12:46

BorisZeHachoir a écrit :
Concernant ta proposition, elle ne fonctionne pas...

C'est normal, je te donnais un exemple. Il te faut l'adapter à ton projet !

Un peu de lecture:

Comment faire un arrière-plan étirable

Si dans ton menu tu utilises des images sans alternative et que pour une raison ou pour une autre, ces images ne se téléchargent pas, ton visiteur n'aura pas accès aux intitulés de ce menu.

Créer des menus simples en CSS

Je t'encourage à parcourir la section Apprendre du site. Tu pourras trouver de l'information pertinente et complète sur les bonnes pratiques à suivre.

Bonne continuation Smiley cligne

BorisZeHachoir

8 Dec 2010 à 13:23

Merci beaucoup,

le fond est relativement impeccable. Relativement, parce que maintenant sous IE, il y a une barre de scroll qui apparaît. Mais rien de bien gênant.

Je vais regarder pour mon menu aussi, merci pour ce deuxième tuyau.

Par contre, (comme tu m'aide bien j'en profite!) j'ai un dernier soucis a régler, et là ça concerne des images en .png. J'en ai fait pour un tout petit diaporama en css/js, et je les ai mises en png parce que j'ai rajouter sur Photosh, une ombre fine derrière, histoire de donner du volume.

L'effet est intéressant, mais sous IE, l'ombre (pourtant en png) n'a pas le rendu voulu. En effet, ça fait un bloc noir, sans dégradé, et ce n'est vraiment pas joli. Comme si ça ne marchait pas, alors que les boutons du menu sont en png aussi et eux fonctionnent!

Je te donne un lien vers mon serveur "test" pour que tu puisse jeter le coup d'oeil.

http://www.di-credico.com/test/index.php?lien=visite

Merci!

BorisZeHachoir

8 Dec 2010 à 13:28

Aller j'en profite, après j'arrête de t'embéter!

Je pense que tu verras mais, quand tu ouvre mon site sous Chrome, le menu est tout étriqué. Et dès qu'on clique sur le menu pour aller à l'accueil, ou autre, tout se remet en place comme il faut.

http://www.di-credico.com/test/

Tu saurais d'où ça peut venir?

Remerci!

BorisZeHachoir

8 Dec 2010 à 16:07

Je viens de résoudre le soucis du menu étriqué, c'était les pourcentages des images pour le menu.
Il ne me reste qu'a résoudre le png non lu par IE... Help..

BorisZeHachoir

10 Dec 2010 à 12:14

Bonjour,

encore moi et mon problème de background. Smiley langue

J'ai bien regardé le tuto d'alsacréation, j'ai fait tous les tests que j'ai pu. Mais rien à faire.

Je reste toujours confronté à un problème : le fond ne suit pas le texte ou le diaporama quand on zoom sur la page.
En soit, ce problème n'est pas important vous me direz, il suffit de ne pas zoomer.

Mais ce qui me gène c'est que sur d'autres ordinateurs, avec d'autres résolutions plus petites, le texte et le diaporama sortent directement du fond.

Je voudrais que le fond soit tout le temps derrière, qu'il suive tout le temps le texte et le diaporama. Smiley fache

Je ne trouve pas comment faire... Smiley bawling

Please help!!!!

BorisZeHachoir

13 Dec 2010 à 09:25

Bonjour,

je n'ai malheureusement toujours pas trouvé de solution pour le background de mon site.

Je me prends pas mal la tête, à tel point que je bloque sur autre chose maintenant...

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?

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;
}

Laurie-Anne

13 Dec 2010 à 10:10

Bonjour,

Le problème le plus courrant dans les cas de disparition de background, c'est l'erreur de chemin de fichier.

EDIT : Et je confirme que c'est bien le problème :

http://www.di-credico.com/test/images/fond.jpg a écrit :
Not Found
The requested document was not found on this server.

Modifié par Laurie-Anne (13 Dec 2010 - 10:12)

BorisZeHachoir

13 Dec 2010 à 10:37

Pourtant l'image est bel et bien dans ce dossier.

Que ce soit sur wamp ou sur le serveur test.

J'ai changé certaines choses dans le html et dans le css.

Je récupère l'image de fond, tout va bien.

Mais je reste toujours sans solution par rapport à mon soucis de départ :

Lorsqu'on zoome, ou que l'on a une petite résolution d'écran, le texte ou le diaporama sortent de l'image de fond.

J'aimerai pouvoir dire au #contenu ou au #fond, de garder tout le temps toutes les div à l'intérieur, ou alors de dire au div de ne pas sortir de l'image de fond...

Mais je ne trouve rien sur pleins de forum, c'est important que je résolve ce soucis, mon site doit être opérationnel avant la fin de la semaine.

Y aurait-il une solution ou je me bats pour rien?

<!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>

<img class="fond" src="images/fond.jpg" alt=""/>
<div id="contenu">

<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>


		
</div>
</body>
</html>

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;
	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;
	
}

.fond{
	width:100%; 
	height:100%; 
	position:absolute;
}

#contenu{
	width:100%;
	height:100%;
	position:absolute;
}

Merci de m'aider!
Modifié par BorisZeHachoir (13 Dec 2010 - 10:37)

Laurie-Anne

13 Dec 2010 à 10:49

Le plus simple, et le mieux, serait d'oublier cette idée de fond redimentionnable (de toute façon, ça ne semble vraiment pas marcher) et de supprimer les positionnement absolu et de placer l'image fond.jpg en background CSS.

Les images qui se redimentionnent côté client, ce n'est jamais une bonne idée : perte de qualité, déformation, pixelisation...

Si tu souhaites avoir une image adaptée aux principales résolutions d'écran, il y a toujours JS avec un script qui permet de spécifier l'image de fond en fonction de la taille du viewport du visiteur :

var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined'){
	viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !=	'undefined' && document.documentElement.clientWidth != 0){
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
if(viewportwidth < 801) document.body.style.backgroundImage="url('img/bg_800.jpg')";
else{ 	if(viewportwidth < 1025) document.body.style.backgroundImage="url('img/bg_1024.jpg')";
			else{ 	if(viewportwidth < 1281) document.body.style.backgroundImage="url('img/bg_1280.jpg')";
						else{ 	if(viewportwidth < 1601) document.body.style.backgroundImage="url('img/bg_1600.jpg')";
									else document.body.style.backgroundImage="url('img/bg_2000.jpg')";
						}
			}
}

Le script ne gère pas le redimentionnement en cours de navigation, mais c'est un cas rare.

Pour voir en live, il est intégré sur mon site (bouton www).

BorisZeHachoir

13 Dec 2010 à 10:58

Le seul soucis si j'oublie cette idée, c'est que le texte est blanc, et lorsque le texte dépasse en bas de l'image de fond, il atterrit sur du blanc, ou sur une autre couleur unie, et c'est...moche.

Je cherche actuellement comment faire pour que l'image de fond se répète verticalement, histoire de garder une unité.

Mais à première vue, background-repeat ne fonctionne pas... Sniff Smiley bawling

Mabelle

13 Dec 2010 à 11:49

Bonjour,

Laurie-Anne a écrit :
Le plus simple, et le mieux, serait d'oublier cette idée de fond redimentionnable (de toute façon, ça ne semble vraiment pas marcher) et de supprimer les positionnement absolu et de placer l'image fond.jpg en background CSS.

Tu as une piste de solution là. Il te faut absolument utiliser ton image de fond en background CSS et là, tu pourras utiliser background-repeat....

Enlève ceci

<img class="fond" src="images/fond.jpg" alt=""/>

et met ton image comme ceci

body {background: url(images/fond.jpg) top left repeat-y;}

D'ailleurs, c'est la solution que je te donne depuis le début ! Smiley langue

Modifié par Mabelle (13 Dec 2010 - 11:54)

BorisZeHachoir

13 Dec 2010 à 13:35

Bon alors du coup, j'ai légèrement changé l'image de fond, plus unie, sans le bandeau sur le côté, ce qui me permet de faire un repeat pas trop vilain.

Dans le css, j'ai fait:

background: url(images/fond2.jpg) repeat;

Ca fonctionne a merveille sur wamp, que ce soit sur firefox, chrome ou IE, et dès que je l'exporte sur le serveur test, l'image de fond ne s'affiche pas!!!

Je suis désespéré!!!!!!!!! Je viens de rerererevérifier, peut être que je ne vois plus rien.... Sniff et resniff
Modifié par BorisZeHachoir (13 Dec 2010 - 13:37)

Laurie-Anne

13 Dec 2010 à 13:38

Tu n'aurais pas oublié d'uploader ta nouvelle CSS ?

BorisZeHachoir

13 Dec 2010 à 13:42

Justement non, pour en être sûr, j'ai même tout effacer et entièrement ré-exporté le site... Ca ne marche pas.

http://www.di-credico.com/test/

Ca marche pour vous?

BorisZeHachoir

13 Dec 2010 à 13:49

Meme sur un deuxième serveur test ça ne fonctionne toujours pas... Blocage Smiley biggol

http://douceysculpteur.com/test/

BorisZeHachoir

13 Dec 2010 à 14:11

Je viens de faire mille et un tests.
Rien ne bouge, sur Wamp avec les trois explorateurs c'est parfait.
Mais sur les deux serveurs tests, rien de rien. Pas de fond.

Je peux vous donner tout mon html et tout mon css si vous le voulez?

BorisZeHachoir

13 Dec 2010 à 14:31

Je viens de trouver et ça marche nickel..

Tout ça a cause d'une toute petite "erreur" (qui n'en était pas une avant, mais cela a changé et je ne sais pas pourquoi).

A la place de

background: url(/images/fond2.jpg) repeat;

j'ai mis

background: url(/..images/fond2.jpg) repeat;

Ca fonctionne!

Merci de vous y être penché et de m'avoir donner tous ces conseils.
Smiley biggrin

Pages :

Sujet clos

CSS et mise en forme, CSS3

Background : toujours aucune solution...