28172 sujets

CSS et mise en forme, CSS3

Problème avec background-position:bottom right pour <body> [RESO

Bonjour à tous,

j'ai un petit problème qui me rend fou !!

Quelqu'un peut-il me dire où est l'erreur dans cette instructions CSS ?

body {background-color:#FFFFFF;	background-image:url(pictures/fondbody.jpg); background-position:bottom right; background-repeat:no-repeat; border:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.75em; color:#404040;}


Cela concerne l'image de fond positionnée: je voudrais qu'elle apparaisse en bas à droite de la fenêtre. Tel quel, Seul IE l'affiche correctement. FF et Opera refuse de la mettre en bas (pour une fois que c IE qui fait ce qu'on demande...). il respectent la valeur right mais pas bottom. j'ai essayé plusieurs combinaisons d'essai/erreur et il apparait que même seule (background-position:bottom), l'instruction bottom n'est pas respectée (image centrée). LE COMBLE: la valeur top la rabaisse car elle fixe le haut de l'image au haut de la fenêtre. Bottom, elle, fixe le bas de l'image à... à quoi?

Je soupçonne FF et Opera d'aligner l'image sur le bas du contenu et non de la fenêtre. Comme le contenu de ma page est très réduit et reste haut, ce serait une explication. Mais alors, COMMENT JE FAIS pour placer cette p§&€in d'image de fond en bas à droite de ma fenêtre ?!

Les gars... SOS... je deviens taré... Smiley sweatdrop
Modifié par log_x (28 Feb 2008 - 19:57)
Bonjour,

log_x a écrit :
Je soupçonne FF et Opera d'aligner l'image sur le bas du contenu et non de la fenêtre.

Pour ma part, je les soupçonne de l'aligner sur le bas de l'élément body, ce qui serait plutôt logique. Smiley cligne

Plus sérieusement, l'élément body est un élément bizarre en HTML. Tu peux essayer de lui donner une couleur de fond, une image de fond alignée en bas, des bordures, des marges, et autres propriétés, et constater le résultat dans les différents navigateurs... ben c'est pas toujours très logique. La couleur de fond est appliquée à tout le canevas (le «fond de page»), les bordures sont appliquées à la boite de contenu, et l'image de fond est soit appliquée au canevas (IE, Safari), soit appliquée à ce qui pourrait être la boite de l'élément html (FF, Opera). Bref, un sacré mic-mac.

Dans ton cas, le salut vient de background-attachment: fixed qui met tout le monde d'accord.

Exemple:
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css" media="screen">
	body {background: #ddd url(test.png) center bottom no-repeat;}
	h1 {height: 1200px; border: solid green;}
	</style>
</head>

<body>

<h1>Titre de la page</h1>
<p>Ceci est un paragraphe.</p>

</body>
</html>
Sujet clos
Aller à