Background centré sur IE mais pas sur FF

**-Nyk-** · 05/01/2009, 20h01

Salut!

J'ai un petit problème auquel j'ai essayé d'apporter beaucoup de solutions, mais aucune ne marche...

Je veux mettre un background qui sera centré dans la page. Alors ça marche très bien sur IE mais pas sur FF :

http://www.madeindal.fr/zenconseilaaaa

J'ai essayé plein de truc comme les margin, remplacer les mot-clés par des pourcentages ou encore stipuler la hauteur et la largeur de l'image mais rien y fait, sous FF l'image est coupée...

Que faire?

Mon bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
body {
color:black;
background-color:blue;
background-image:url(zenarchi.jpg);
background-repeat:no-repeat;
background-position:center center;
}

**Erwan31** · 05/01/2009, 20h51

Bonsoir,
sois attentif tu as oublié le div container et tu n'y a pas placé le backgroun dedans.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
color:black;
background:blue;
}
#container {
    position: absolute;
    width: 900px;
    height: 566px;
    top: 50%;
    left: 50%;
    margin: -283px 0 0 -450px; /* Margin : Top Right Bottom Left */
    /* Margin: -(hauteur/2) 0 0 -(largeur/2) */
	background:url(ZenConseil_files/zenarchi.jpg) no-repeat center;
}

Si une seule valeur center est précisée, l'autre prend aussi la valeur center.
Pour info sur un écran 800X600 l'image sera rognée en hauteur d'environ 70 pixel puisque la zone d'affichage en 800x600 est d'environ 425px alors que ton image fait 495px de haut.

**12monkeys** · 05/01/2009, 20h54

Bonsoir

Rajoute simplement ceci dans ton css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html {
height:100%;
}

edit : grillé

**Erwan31** · 05/01/2009, 21h16

Bonsoir et bonne année!

Envoyé par 12monkeys

Bonsoir
Rajoute simplement ceci dans ton css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html {
height:100%;
}

edit : grillé

Sorry 12Monkeys

ne sais tu donc pas qu'Erwan31 est le spécialiste
du grillage sur des questions simple malgré lui? > ne répondre à ce type de
question que lorsqu'Erwan31 n'est pas connecté

Pour info c'est une autre solution envisageable mais il faut y ajouter un body à height:100%

**12monkeys** · 05/01/2009, 21h44

Envoyé par Erwan31

Sorry 12Monkeys

ne sais tu donc pas qu'Erwan31 est le spécialiste du grillage sur des questions simple malgré lui? > ne répondre à ce type de question que lorsqu'Erwan31 n'est pas connecté

Envoyé par Erwan31

Pour info c'est une autre solution envisageable mais il faut y ajouter un body à height:100%

Comprends pas

j'ai bien précisé qu'il devait rajouter mon code au sien...

**-Nyk-** · 05/01/2009, 22h28

Non non mais le container c'est pour un fichier flash qui va au dessus de l'image de fond et le code de ce container marche parfaitement bien.

Je vous met le code en entier pour que vous compreniez bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zen Conseil</title>
 
<style type="text/css">
<!--
 
body {
color:black;
background-color:blue;
background-image:url(zenarchi.jpg);
background-repeat:no-repeat;
background-position:center center;
}
 
 
.Style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #999999;
}
 
#container {
    position: absolute;
    width: 900px;
    height: 566px;
    top: 50%;
    left: 50%;
    margin: -283px 0 0 -450px; /* Margin : Top Right Bottom Left */
    /* Margin: -(hauteur/2) 0 0 -(largeur/2) */
}
 
-->
</style>
 
</head>
<body>
<div id="container">
 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="566" title="">
  <param name="movie" value="site_zen_conseil_03.swf" />
  <param name="quality" value="high" />
  <embed src="site_zen_conseil_03.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="566"></embed>
</object>
 
</div>
</body>
</html>

Voilà, c'est seulement l'image de fond qui marche pas (sur FF)

Je vais continuer mes recherches avec vos infos.

Merci!

**-Nyk-** · 05/01/2009, 23h38

Bon je viens de tester un truc completement par hasard :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-attachment:fixed;

Et ça y est c'est centré dans IE et FF... Comprend pas. Ce bout de code c'est pour que le fond ne défile pas quand utilise la scrollbar, non? Quel est le rapport avec le positionnement dans la fenêtre alors?

Le résultat :

http://www.madeindal.fr/zenconseilaaaa2

**Erwan31** · 06/01/2009, 01h30

@12monkeys Pour que le height:100% puisse prendre effet, il doit aussi être déclaré au niveau du body (voir l'exemple ci-dessous)

Envoyé par -Nyk-

Et ça y est c'est centré dans IE et FF... Comprend pas. Ce bout de code c'est pour que le fond ne défile pas quand utilise la scrollbar, non? Quel est le rapport avec le positionnement dans la fenêtre alors?

Oui le background fixed se place en fonction du viewport (la zone d'affichage) et non plus de son conteneur.
Dans ton premier exemple Firefox avait un comportement standard puisque le centre vertical du background était situé en haut du viewport qui avait une hauteur nulle puisque tu n'avais rien précisé à ce niveau là.
Tu n'as pas besoin de passer par la valeur fixed pour ce que tu souhaites faire. Il te suffit de donner au conteneur du background (le body) une hauteur de 100% (qui se réfère à la hauteur de l'élément racine html qui doit donc lui aussi être à 100%).
Le max-height évite que les scrollbars s'affichent inutilement en plein écran sur les principaux navigateurs alternatifs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
html, body {
	height: 100%; 
	max-height: 98%;
	background: blue;
	}
body {
	color: black;
	background: url(ZenConseil_files/zenarchi.jpg) no-repeat center;
}

**Candygirl** · 06/01/2009, 15h58

Envoyé par -Nyk-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-attachment:fixed;

[...]
Quel est le rapport avec le positionnement dans la fenêtre alors?

Le positionnement fixed se fait raport à la zone de visualisation, donc la taille de ta fenêtre; ton image est donc centrée raport à la fenêtre.

Sans positionnement fixed, ton background prend comme référence ton body qui, en hauteur s'adapte à la taille de son contenu. ¨Ton image est donc centrée sur la hauteur du body qui, lui, ne prend pas toute la hauteur de la fenêtre.

C'est assez trompeur à cause de la propriété background-color, appliquée au body et en l'absence de background-color sur l'élément html, qui remplit par défaut toute la zone de visualisation quand bien même le body n'a pas de hauteur (attribue un border au body pour mieux visualiser). Ce qui est un comportement illogique mais spécifié explicitement dans les recommandations css2.

**12monkeys** · 06/01/2009, 18h23

Envoyé par Erwan31

@12monkeys Pour que le height:100% puisse prendre effet, il doit aussi être déclaré au niveau du body (voir l'exemple ci-dessous)

Ah ok je comprends mieux ce que tu veux dire, mais c'est bizarre parce que j'ai testé ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MaPage</title>
<style type="text/css">
html {
height:100%;
}
body {
color:black;
background-color:blue;
background-image:url(img1.jpg);
background-repeat:no-repeat;
background-position:center center;
}
</style>
</head>
 
<body>
 
 
</body>
</html>

et cela fonctionne (c'est à dire que l'image s'affiche bien au centre de la zone de visualisation tant verticalement que horizontalement), testé avec IE7 et FF3...

**Erwan31** · 06/01/2009, 19h29

En effet autant pour moi, mais c'est une incohérence totale: la hauteur du body est nulle mais son background s'affiche quand même comme si le body était absent. C'est probablement dû au statut un peu particulier des éléments html et body.

**Candygirl** · 06/01/2009, 20h13

Ce que css 2 disait:

L'arrière-plan de la boîte générée par l'élément racine recouvre la totalité du canevas.

Dans le cas de documents HTML, on recommande aux auteurs de spécifier un arrière-plan à l'élément BODY, plutôt qu'à l'élément HTML. Les agents utilisateurs devraient suivre les règles de préséance suivantes pour remplir le fond du canevas : quand la valeur de la propriété 'background' pour l'élément HTML diffère de 'transparent', alors utiliser la valeur spécifiée, autrement utiliser celle spécifiée par la propriété 'background' de l'élément BODY. Le rendu n'est pas défini si la valeur finale reste 'transparent'.

Ce que css2.1 dit:

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For HTML documents whose root HTML element has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of those properties from that HTML element's first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element. This does not apply to XHTML documents.

ce qui explique pourquoi le height de 100% sur le html suffit, non?

**Erwan31** · 06/01/2009, 20h28

Salut Candygirl

Envoyé par Candygirl

ce qui explique pourquoi le height de 100% sur le html suffit, non?

Ah, voilà qui explique cela, merci pour le paragraphe.
(dommage que personnes n'ait pu traduire la spec du niveau 2.1 de CSS, il y a pas mal de différence...) Sans doute parce qu'elles sont même pas encore à l'état de Recommandation (c'est une des priorités du CSS Working group)

**-Nyk-** · 07/01/2009, 01h29

Merci pour toutes ces réponses!

Bon, j'ai testé le code de 12monkeys et ça marche... mais pas encore correctement. Oui, il y a encore une différence entre IE et FF :

www.madeindal.fr/zenconseil

A priori tout semble bon, mais lorsqu'on tente un redimensionnement sous IE, le SWF se décale par rapport au background (alors que FF est intelligent et décale le SWF et le background en même temps).

Vous allez me dire que c'est pas très grave, mais en fait si ça l'est.
Imaginez que je veuille prolonger les barres jaunes du SWF sur un JPG qui sera placé comme background : lors du redimensionnement, les barres jaunes du background ne seront plus en face de celles du SWF...

Background centré sur IE mais pas sur FF

CSS

Discussions similaires

Partager

Partager