Positionnement image

Résolu/Fermé

naitreGitan Messages postés 406 Date d'inscription mercredi 4 juillet 2007 Statut Membre Dernière intervention 6 décembre 2018 - 27 avril 2009 à 10:41
naitreGitan Messages postés 406 Date d'inscription mercredi 4 juillet 2007 Statut Membre Dernière intervention 6 décembre 2018 - 27 avril 2009 à 14:38

Bonjour à tous,

J'ai un petit soucis pour positionner mon image,
J'aimerais la placer au centre en faisant
background-position: center center;
mais rien ne se passe...
je vous laisse mon code pour que vous puissiez voir où ça va pas...

fichier html :
<!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="fr" >
<head>
<title>Titre!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

</head>
<body>
<div class="baniere"> </div>
</body>
</html>

fichier css :

body
{
background-color:#000000
}
.baniere
{
background-image: url("../Photos/Index.jpg");
width:500px;
height:290px;
background-position: center center;
}

Par avance, merci...

A voir également:

Positionnement image
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Image iso windows 10 - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama
Comment agrandir une image - Guide

9 réponses

Réponse 1 / 9

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
27 avril 2009 à 10:45

Il se centrera vis-à-vis de ton DIV, si tu veux centrer ton DIV fais :
margin-left: auto;
margin-right: auto;

!naitregitan
27 avril 2009 à 10:55

merci de ta réponse,

Mais j'ai déjà essayer avec ça, et ça ne positionne au centre par rapport au bord gauche, et pas au centre, par rapport au bord haut...

Réponse 2 / 9

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
27 avril 2009 à 11:01

Est-ce que ton site est en ligne ? Pour qu'on puisse voir ton problème concrètement... Je t'ai dis que l'image se met au centre par rapport au DIV... Ton div est en format de bannière donc il saurait pas être au centre de ta page, il se met au centre de ton div, si tu veux qu'il soit au centre de ta page tu dois faire ça :

Ce qui se trouve dans .baniere tu met dans body...

Réponse 3 / 9

Borracho dans les rues
27 avril 2009 à 11:01

Bin dans ce cas tu fais :

background-position: top center;

:-)

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
27 avril 2009 à 11:06

je pense pas que ce soit ce qu'il veut... ^^

Réponse 4 / 9

naitreGitan Messages postés 406 Date d'inscription mercredi 4 juillet 2007 Statut Membre Dernière intervention 6 décembre 2018 2
27 avril 2009 à 11:28

merci encore les gens de vous attarder sur mon problème..

Concrètement, quelle est la meilleure solution (quelles balises pour travailler dessus avec le css ?) pour mettre une image sur une page ?

empty, j'ai tout mis dans le body et je n'ai plus rien qui s'affiche...

ps: non, je travaille sur mon pc, ce n'est pas en ligne.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

Borracho dans les rues
27 avril 2009 à 11:43

Euh... Et bien tu peux travailler sur un <table>
<style>
#header{
background-image: url(./images/BG.jpg);
etc...
}
</style>
<table id="header">
<tr><td></td></tr>
</table>

naitreGitan Messages postés 406 Date d'inscription mercredi 4 juillet 2007 Statut Membre Dernière intervention 6 décembre 2018 2
27 avril 2009 à 12:05

Merci d'apporter ton aide,

Je viens d'essayer avec ton table...mais j'ai toujours le même problème.

J'ai essayer avec :

- backgrount-position: center center;

- margin-top: auto;
margin-left: auto;

Mais jamais je n'obtiens le rendu désiré, c'est à dire mon image centré par rapport au haut et à la gauche.

Réponse 6 / 9

pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 752
27 avril 2009 à 12:09

Salut,
Essaye ceci :
HTML
<div id="contenu">
<img src="images/photo_small.jpg" alt="photo" width="390" height="233">
</div>
CSS
#contenu{
position:absolute;
left: 50%;
top: 50%;
margin-top: -110px; /* moitié de la hauteur de l'image */
margin-left: -195px; /* moitié de la largeur de l'image */
}

J'ai trouvé ça ici :
http://ww38.cyberformateur.com/cours_css/exemples/centrage_image.htm
Bon courage et n'oublie pas google........

Réponse 7 / 9

Borracho
27 avril 2009 à 12:11

voila essaye ca :-)

<html>
<body>
<style>
#header{
background-image:url(http://www.google.fr/logos/samuelmorse09.gif);
background-repeat: no-repeat;
background-position:center center;
width:500px;
height:500px;
}
</style>
<table id="header" border="1">
<tr>
<td valign="top">
TEST
</td>
</tr>
</table>
</body>
</html>

Réponse 8 / 9

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
27 avril 2009 à 12:33

On peut voir ton rendu en ligne et ce que tu désire faire exactement ?

naitreGitan Messages postés 406 Date d'inscription mercredi 4 juillet 2007 Statut Membre Dernière intervention 6 décembre 2018 2
27 avril 2009 à 14:11

Je vais essayer de te mettre ça en ligne dès que possible...

Mais ce n'est pas compliqué à la base ce que je demande...J'ai une image que je veux centrer horizontalement et verticalement...

merci de votre patience...

pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 752 > naitreGitan Messages postés 406 Date d'inscription mercredi 4 juillet 2007 Statut Membre Dernière intervention 6 décembre 2018
27 avril 2009 à 14:29

Ma réponse ne te convient pas??? cf post 9

naitreGitan Messages postés 406 Date d'inscription mercredi 4 juillet 2007 Statut Membre Dernière intervention 6 décembre 2018 2 > pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024
27 avril 2009 à 14:31

ben, j'ai essayer, et en fait, ça place mon image plus dans le bas à droit qu'au milieu...

je désespère...

Autant pour moi, ça fonctionne!...

fallait juste que je change la taille dans margin...

Merci à tous..

Réponse 9 / 9

pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 752
27 avril 2009 à 14:34

As tu changé les valeurs de margin-top: et de margin-left: en mettant les valeurs de ton image ?
margin-top: -xxxpx; /* moitié de la hauteur de l'image */
margin-left: -xxxpx; /* moitié de la largeur de l'image */

Discussions similaires