[Résolu]Centrer le background-image de body sous diverses résol.

Bonjour


Désolé d'encombrer la base avec le même message. Mais cela me ferait gagner beaucoup de temps, si une solution était trouvée.

En 1024x768 : centrer


En 800x600 : non centrer


Code CSS :

<style type="text/css">
body {
	background: url(images/arriere-plan.jpg) no-repeat center;
	height: 271px;
	width: 1024px;
	margin: 0px;
	padding: 0px;
}
</style>

Pouvez-vous me dire comment centrer horizontalement le background de body lorsque le navigateur passe à une résolution de 800 pixels de large ?

À 1024 pixels, mon élément graphique (1024x271) s'affiche correctement mais au passage au deçà, celui-ci vient se coller à gauche de la fenêtre du navigateur.
Voici la page en question à tester sous 1024x768 et 800x600.


Merci pour votre aide
Modifié par ThVi (28 Sep 2008 - 13:06)

Bonjour,

Le problème que tu rencontres vient du fait que l'élément BODY est un élément «magique», qui ne définit pas tout à fait une boite rectangulaire répondant au modèle de boite CSS (que tu connais sur le bout des doigts, donc je ne le rappelle pas ), mais qui a certaines spécificités.

En effet, même si tu donnes une largeur fixe (de 1024px ou 600px ou autre) à BODY, lorsque tu lui appliques une couleur de fond cette couleur de fond s'applique à l'ensemble de la zone de visualisation du navigateur (viewport).

Quant aux images de fond, elles semblent s'appliquer à l'élément BODY sur toute sa largeur et hauteur, mais la largeur dépend de la fenêtre du navigateur, au moins avec certains navigateurs. Si j'en crois Firebug, lorsque je redimensionne la fenêtre du navigateur aux alentours de 700px de large j'ai les dimensions suivantes:
- élément BODY: 675px;
- élément div#ja-wrapper: 1001px.

Moralité: ne pas donner de largeur et hauteur à l'élément BODY, c'est trop casse-gueule. Passer cette image de fond (que tu veux utiliser pour dessiner une ombre) en fond de div#ja-wrapper, ou trouver un autre moyen.

a écrit :
Pouvez-vous me dire comment centrer horizontalement le background de body lorsque le navigateur passe à une résolution de 800 pixels de large ?

Il est centré horizontalement. Par contre la largeur de BODY ne se fige pas aux 1024px demandés (ce qui explique pourquoi tu n'as pas de barre de défilement parasite en 1024x768...).
Modifié par Florent V. (30 Aug 2008 - 19:26)

Florent V. a écrit :
Bonjour,

Le problème que tu rencontres vient du fait que l'élément BODY est un élément «magique», qui ne définit pas tout à fait une boite rectangulaire répondant au modèle de boite CSS (que tu connais sur le bout des doigts, donc je ne le rappelle pas ), mais qui a certaines spécificités.

En effet, même si tu donnes une largeur fixe (de 1024px ou 600px ou autre) à BODY, lorsque tu lui appliques une couleur de fond cette couleur de fond s'applique à l'ensemble de la zone de visualisation du navigateur (viewport).

Quant aux images de fond, elles semblent s'appliquer à l'élément BODY sur toute sa largeur et hauteur, mais la largeur dépend de la fenêtre du navigateur, au moins avec certains navigateurs. Si j'en crois Firebug, lorsque je redimensionne la fenêtre du navigateur aux alentours de 700px de large j'ai les dimensions suivantes:
- élément BODY: 675px;
- élément div#ja-wrapper: 1001px.

Moralité: ne pas donner de largeur et hauteur à l'élément BODY, c'est trop casse-gueule. Passer cette image de fond (que tu veux utiliser pour dessiner une ombre) en fond de div#ja-wrapper, ou trouver un autre moyen.

Pouvez-vous me dire comment centrer horizontalement le background de body lorsque le navigateur passe à une résolution de 800 pixels de large ?

Il est centré horizontalement. Par contre la largeur de BODY ne se fige pas aux 1024px demandés (ce qui explique pourquoi tu n'as pas de barre de défilement parasite en 1024x768...).

Wouah, merci pour la rapidité
En somme, il ne faudra rien attendre de body dans ce cadre là.

J'ai commencé de mon côté à créer un div pour ce fond (position : absolute... Patati et patata...).

Et effectivement, il y a plus simple, comme tu l'as souligné : la possibilité d'intégrer le background dans la div#ja-wrapper (l'expérience a parlé).

Merci les gars pour votre promptitude à répondre aussi rapidement
Modifié par ThVi (30 Aug 2008 - 20:35)

Salut,

Petit test a faire:

html {background:#ccc;}
body {background: #ccc url(http://forum.alsacreations.com/upload/15172-1024x768.png) top center no-repeat;
}
div {width:800px;margin:auto;min-height:300px;}

et une page html 4.01 strict ou xhtml avec :

<div>	 Zone test	</div>

en admettant un doctype valide et IE 6/7 effectivement en mode standard , on a toute les chance de voir l'image de fond de body se centré sur la largeur de la page et non plus le viewport !.

En indiquant une valeur de fond a html , on désolidarise en parti body du viewport .
Petit comportement utile a connaitre lorsque l'on n'est pas maitre du code généré par l'appli Web ou allergique a la divite .

re7 a écrit :
Salut,

Petit test a faire:

html {background:#ccc;}
body {background: #ccc url(http://forum.alsacreations.com/upload/15172-1024x768.png) top center no-repeat;
}
div {width:800px;margin:auto;min-height:300px;}

et une page html 4.01 strict ou xhtml avec :

<div>	 Zone test	</div>

en admettant un doctype valide et IE 6/7 effectivement en mode standard , on a toute les chance de voir l'image de fond de body se centré sur la largeur de la page et non plus le viewport !.

En indiquant une valeur de fond a html , on désolidarise en parti body du viewport .
Petit comportement utile a connaitre lorsque l'on n'est pas maitre du code généré par l'appli Web ou allergique a la divite .

Bonsoir


J'ai testé ta théorie mais malheureusement le résultat n'est pas probant : l'image de fond de body est rognée sur la largeur du viewport en 792px (résolution 800px) et donc le background-image n'est pas désolidarisé du viewport.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>centrer-background-de-body-sous-diverses-résolutions</title>
<style type="text/css">
<!--
html {background-color: #33CC66;}
body {background: #ccc url(http://forum.alsacreations.com/upload/15172-1024x768.png) top center no-repeat;}
div {
	width:800px;
	margin:auto;
	min-height:300px;
	border: thin solid #000000;
}
-->
</style>
</head>
<body>
<div>TEST</div>
</body>
</html>

Pour mémo : comme Florent V. qui a justement fait remarquer : mon image est centrée dans le viewport (792px) et non sur la page (1024px).
Mais ça, tu l'as compris.


Merci pour ta contribution

Pardon , le test proposé est incomplet ...

Il se doit d'y avoir un min-width associer , ce min-width suffit a la majorité des Navigateurs , sauf Firefox qui a besoin d'un fond pour html aussi.

Quand a IE6 (en mode standard ) un width + margin auto; ou un width expression( voir la faq) lui permettra aussi d'avoir un rendu proche du résultat attendu
css test surchargé:

<!--

html {background-color: #ccc;/* pour firefox dans le cadre de ce test */}

body {background: #ccc url(http://forum.alsacreations.com/upload/15172-1024x768.png) top center no-repeat;
min-width:1024px;
width:auto!important;
/* A l'attention de IE6 */
width:1024px;margin:auto;
}
div {
	width:800px;
	margin:auto;
	min-height:300px;
	border: thin solid #000000;
/* A l'attention de IE6 */
height:auto!important;
height:300px;
}

-->

Désolé