28173 sujets

CSS et mise en forme, CSS3

Background-position, petit problème.

Bonsoir,
Alors voilà, j'aurais besoin de centrer une image de fond verticalement et horizontalement, j'utilise donc ce code dans le css:
body.splash {
  background-color: #000000;
  background-image: url(../layout/bg-logo.png);
  background-repeat: no-repeat;
  background-position: center center;
 }

Et celui-ci dans l'index.htm:
<body class="splash">

Le problème se situe au niveau du centrage, horizontalement, rien à signaler c'est parfait, quant au niveau vertical... l'image se retrouve en haut de la page avec la moitié masquée.
Petit croquis de ce que je souhaite et de ce que j'obtiens.
Désiré: +------------+  Obtenu: +------------+
        |   +----+   |          |   |    |   |
        |   |    |   |          |   +----+   |
        |   |    |   |          |            |
        |   +----+   |          |            |
        +------------+          +------------+
Avec quel navigateur est-ce que tu obtiens ça ?

Et es-tu sûr que ton body fasse bien les 100% de la hauteur de la fenêtre ?
Si la page est vide, ou ne contient que (ou surtout) des éléments positionnés en absolu ou des éléments flottants, ça n'est sûrement pas le cas, du moins pour les versions récentes de Gecko (moteur de rendu de Firefox 1.5).
Merci de votre réponse. ^^
J'obtiens cela dans Firefox/1.5.0.3. La page est totalement vide, elle ne contient en effet qu'une balise body, voici d'ailleurs le code complet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>radicalcorp</title>
<meta name="description" content="xxxxx - xxxxx">
<link href="ressources/style.css" rel="stylesheet" type="text/css">
</head>
<body class="splash">
</body>
</html>

Je me remet doucement au webdesign, et je me rapelle bien que cette image de fond s'afficher parfaitement avant que je ne mette à jour firefox (tout du moins comme je le souhaitais. Smiley ravi ).
Radical Edward a écrit :
Je me remet doucement au webdesign, et je me rapelle bien que cette image de fond s'afficher parfaitement avant que je ne mette à jour firefox (tout du moins comme je le souhaitais. Smiley ravi ).

C'est effectivement dû à un changement dans la version de Gecko (le moteur de rendu) utilisé entre Firefox 1.0.x et Firefox 1.5.x

Avec la version récente, body ne prend plus que la hauteur de son contenu… sauf que voilà, ça se voit pour une image de fond, mais avec une couleur de fond la couleur prendra bien toute la hauteur de la page…

Je ne sais pas si mettre l'image sur html règle le problème (ça risque surtout d'en créer avec d'autres navigateur plus anciens). Sinon, il doit également être possible de mettre html et body en height: 100%;.

Quelque chose du style…
D@n!eL_ a écrit :
En fouillant légèrement...
http://www.cssplay.co.uk/layouts/background.html

Je crois qu'avec ça, tu peux faire en sorte que ton background soit centré peu importe la grandeur de la fenêtre.


Non non, ça c'est une autre problématique…
La solution au problème de Radical Edward serait, il me semble, de ce style :
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

Mais ça implique de respecter un certain nombres de contraintes pour éviter une barre de défilement vertical intempestive, par exemple. En particulier des choses liées à la fusion des marges.
mpop a écrit :

Non non, ça c'est une autre problématique…
La solution au problème de Radical Edward serait, il me semble, de ce style :
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

Mais ça implique de respecter un certain nombres de contraintes pour éviter une barre de défilement vertical intempestive, par exemple. En particulier des choses liées à la fusion des marges.

Merci beaucoup de cette réponse, c'est exactement ce dont j'avais besoin. Mon image de fond est parfaitement centré et donne l'effet voulu. ^^
Sujet clos
Aller à