Un background avec image centrée ?

lepseudoquetutentapes · 9 Mai 2006

Hello,

Désolé de déranger avec une question pareille, mais... Je ne parviens pas à centrer une image sur un fond.
En gros, c'est pour faire une image disant "site disponible prochainement".

Il y a quelques temps, j'avais fait une page comme celle-ci, et là, je refais le tout.
J'en profite pour réviser la page .html car l'ancienne (code ci-dessous) permettait de scroller horizontalement et verticalement, de quelques pixels, alors que ce n'était pas nécessaire. (on scrollait pour voir du fond et non l'image)

Cette fois, le centrage n'a pas vraiment besoin d'être vertical. Par contre, obligatoire horizontalement.

Voici le code de l'ancienne page. Toutefois, la taille de l'image a changé. A présent du 600x600.

Si quelqu'un avait une idée sur comment la modifier pour obtenir un centrage horizontal de l'image sans scrolling inutile... Ou même s'il faut la recommencer, peu importe.

J'ai bien tenté de chercher sur le net, mais je n'arrive à rien.

Bloc de code:

<!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>

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prochainement...</title>
<style type="text/css">
<!--
body {
	background-color: #201e1f;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 0;
		overflow: visible;
		visibility: visible;
		display: block;
}
#announce {
		margin-left: -400px;
		position: absolute;
		top: -160px;
		left: 50%;
		width: 600px;
		height: 600px;
		visibility: visible;
}
-->
</style>
</head>

<body>
<div id="announce"><img src="annonce.png"></div>
</body>
</html>

Merci par avance. :rose:

Edit:

Hm. Je viens d'essayer un nouveau code. Cela marche sous Safari mais l'image est seulement visible au quart sous Firefox, Opera...

Bloc de code:

<!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>SoOn...</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
	background-image: url(splash.png);
	background-position: center center;
	background-repeat: no-repeat;
}
-->
</style>
</head>

<body>
</body>
</html>

da capo · 9 Mai 2006

Ton deuxième code est valide à priori mais les navigateurs ont leurs humeurs...
Il semble que la plupart calcule le centre sur l'axe vertical en fonction non pas de la taille de la fenêtre mais de l'espace occupé.

Tu peux essayer en ajoutant des lignes , cela fera descendre l'image.

Sur PC je viens d'essayer une astuce et cela tourne avec Firefox et IE6 mais je n'ai pas le temps d'essayer les autres navigateurs (en tout cas pas de mac ici

)

Bloc de code:

<!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>
<title>image centr&eacute;e au fond ?</title>
<style>
<!--
* {
        border:0;
        margin:0;
        padding:0;
}

body {
	background-color: #000000;
	background-image: url(splash.png);
	background-position: center center;
	background-repeat: no-repeat;
}

#toutgrand {
        height:100%;
}
-->
</style>
</head>
<body>
<div id="toutgrand">
<h1>l'image est-elle au centre ?</h1>
</div>
</body>
</html>

On fixe un div de hauteur 100% et cela semble suffire.
J'ai mis à 0 les marges etc pour ne pas hériter d'un ascenseur ou être obligé de passer de 100% à 95% la hauteur du div.

Bon boulot

Niconemo · 10 Mai 2006

Normalement ta solution pour centrer l'image de fond du body devrait marcher sur tous les navigateurs...

Il y a une solution pour centrer une div verticalement dans tous les navigateurs quand la div est de dimensions fixées...

Bloc de code:

#announce {
/* on défini la taille exacte de la div */
        width: 500px;
         height: 400px;
/* on place alors son angle haut-gauche au centre */
        position: absolute;
         top: 50%;
         left: 50%;
/* et enfin on la décale de la moitié de sa largeur vers la gauche */
        margin-left: -250px;
/* et de la moitié de sa hauteur vers le haut */
        margin-top: -200px;
}

Mais il faut savoir qu'il n'est pas bon, en terme d'accessibilité, d'utiliser une image (surtout une image de fond) comme message dans une page.

lepseudoquetutentapes · 11 Mai 2006

Merci à tous deux pour votre aide, c'est gentil.

Pour l'accessibilité, je sais bien. Mais il n'y a aucun contenu et la petite image d'annonce est juste là pour remplacer un bête 404.
Egalement, je pensais que ce serait facile d'obtenir une simple page avec image centrée.

Après tentative de vos deux codes, toujours la même chose.
Soit l'image n'est affichée qu'à moitié, le reste étant quelque part au-dessus du moniteur... :siffle:

Soit cela s'affiche comme un charme (du moins sou Safari dernière mouture), mais avec un problème cependant. Le fond de l'image et celui de la page diffèrent de teinte. Pourtant, les deux codes couleurs sont identiques.
Ce problème n'apparaît pas lorsque l'image s'affiche à demi.

Testé avec Firefox, Camino, Safari. Sur un iMac G5 dernière révision et mon AluBook 12" de 2004.

Encore merci, même si je suis un peu (beaucoup) perdu.

La source, au cas où :

Bloc de code:

<!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>
<link rel="shortcut icon" href="favicon.ico" />
<title>Title</title>
<style>
<!--
body {
	background-color: #201e1f;
	background-image: url(Title.png);
	background-position: center center;
	background-repeat: no-repeat;
}

#Title {

        width: 600px;
         height: 600px;

        position: absolute;
         top: 50%;
         left: 50%;

        margin-left: -300px;

        margin-top: -300px;
}
-->
</style>
</head>
<body>
<div id="Title">
</div>
</body>
</html>

lepseudoquetutentapes · 12 Mai 2006

Cette fois, c'est la bonne. Toujours testé avec Safari, Camino, Firefox et Internet Explorer.

Pour les problèmes de couleurs entre le fond de page et d'image, j'ai opté pour un .png avec transparence. Mais la teinte de la typo' diffère malgré tout entre Safari et ses copains.
Et le pire (mieux), c'est que celui qui respecte la couleur originelle du .psd est Safari.

Enfin, tant pis. Ça devrait aller maintenant.

Le code, si jamais ça intéresse quelqu'un :

Bloc de code:

<!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>
<link rel="shortcut icon" href="favicon.ico" />
<title>Name</title>
<style>
<!--
html {
width: 100%;
height: 100%;
}

body {
	background-color: #FFFFFF;
	background-image: url(Name.png);
	background-position: center center;
	background-repeat: no-repeat;
}

#Name {

        width: 600px;
         height: 600px;

        position: absolute;
         top: 50%;
         left: 50%;

        margin-left: -300px;

        margin-top: -300px;
}
-->
</style>
</head>
<body>
<div id="Name">
</div>
</body>
</html>

Encore merci à vous.

Un background avec image centrée ?

lepseudoquetutentapes

Membre actif

da capo

abonné absent

Niconemo

Modo (toujours vivant !)

lepseudoquetutentapes

Membre actif

lepseudoquetutentapes

Membre actif

Sujets similaires