[résolu] Background-position: top right => interprétation inattendu

Bonjour,

Je souhaite utiliser la propriété background-position mise à la valeur top right sur la balise body afin de positionner une image de fond en dégradé en haut à droite de la page.

Le code css de la balise body est le suivant :

body {
  background-color: white;
  background-image: url(fond.png);
  background-position: top right;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

La page d'exemple est accessible ici : background-position.html

Le problème est que, sous Firefox (et aussi sous Opera d'après ce qu'on m'a dit), l'image de fond se positionne non pas en haut à droite de la page mais en haut à droite de la partie visible de la page, ce qui est très laid lorsque la page n'est pas visible entièrement et qu'on a recours à la barre de défilement horizontale. Le problème est visible sur cette capture : rendu_firefox.png.

Curieusement, c'est pour une fois Internet Explorer qui interprète cette propriété CSS comme je le souhaite. En voici la preuve en image : rendu_ie7.png.

Savez-vous qui a raison vis à vis du W3C ? Savez-vous comment obtenir cette interprétation sur les autres navigateurs que Internet Explorer (peut-être avec les balises -moz-background-quelquechose) ? Connaissez-vous une autre manière d'obtenir ce résultat ?

L'ensemble de l'exemple est accessible ici : alsa

Cordialement,

Maxime Bochon
Modifié par Maxwell7 (05 Mar 2008 - 09:43)

Bonjour,

Le comportement de Firefox est correct (Le background de body est étendu à tout le canevas, mais il est ancré à l'emplacement qu'il occuperait s'il était dessiné uniquement pour l'élément racine. Or celui-ci occupe un rectangle qui a les dimensions de la zone d'affichage (viewport).

Pour obtenir le même résultat que dans IE, déplacer par exemple ce background sur un élément conteneur intermédiaire entre body et le contenu (dont la largeur soit celle du contenu).

A priori sans effets secondaires désagréables :

body {
display:table;
width:100%;
}

va etendre body au dela du view port si necessaire , et englober les flottants ,
doté de layout par le width dans IE , il englobe aussi les flottants.

MAIS , IE7 se bornera au width:100%; IE6 et inferieur comprenant cette valeur comme minimale ainsi que les navigateurs comprenant le display:table; (reprise du comportement de l'element table qui s'adapte a son contenu).

Soluce eventuelle pour le fun donc a utiliser avec précaution mais qui peut demontrer qu'un tableau d'une cellule conteneur de la page , peut servir a regler beaucoup de difference d'affichage , (fond , flottant , alignement h/v , largeur minimale qui s'impose d'elle même , etc ...) et prevenir de bon nombre de faiblesses des 'CSS' tout navigateurs confondu.

< >pas troll , pas troll ... pas taper </>

Bonjour,

Merci pour vos 2 réponses bien distinctes.

Concernant la première méthode, j'ai mis du temps à l'appliquer et je ne suis toujours pas satisfait du résultat, visible sur cette page : background-position.conteneur.html. Donc si quelqu'un connaît un meilleur code que celui qui suit, je suis preneur :

body {
  background-color: lightpink; /* couleur temoin */
}
#conteneur {
  background-color: lightblue; /* couleur temoin */
  background-image: url(fond.png);
  background-position: top right;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  overflow: auto;
  width: 100%;
}
#top {
  margin: auto;
  margin-top: 180px;
  width: 750px;
  height: 200px;
  border: 1px gray solid;
}

Concernant la seconde méthode, elle fonctionne visiblement très bien sous Firefox et s'avère très simple à mettre en place. Il me reste à la tester sur d'autres navigateurs. Elle est visible ici : background-position.display-table.html. Navigateurs testés :
- Internet Explorer 5.5 : ?
- Internet Explorer 6 : ?
- FireFox 1.5 : OK
- FireFox 2 : ?
- Safari : OK
- Opera : ?

Maxime Bochon



PS: si comme moi vous ne connaissiez pas cette possibilité de la propriété display : http://blog.alsacreations.com/2004/06/09/22-display-vous-connaissez
Modifié par Maxwell7 (21 Feb 2008 - 14:56)

bonjour
j'ai testé la deuxième méthode, c'est OK pour :
IE6
IE7
firefox 2
opera

merci à gcyrillus pour le truc !