Positionnement image
Résolu
naitreGitan
Messages postés
406
Date d'inscription
Statut
Membre
Dernière intervention
-
naitreGitan Messages postés 406 Date d'inscription Statut Membre Dernière intervention -
naitreGitan Messages postés 406 Date d'inscription Statut Membre Dernière intervention -
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...
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
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
9 réponses
Il se centrera vis-à-vis de ton DIV, si tu veux centrer ton DIV fais :
margin-left: auto;
margin-right: auto;
margin-left: auto;
margin-right: auto;
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...
Ce qui se trouve dans .baniere tu met dans body...
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.
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
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>
<style>
#header{
background-image: url(./images/BG.jpg);
etc...
}
</style>
<table id="header">
<tr><td></td></tr>
</table>
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.
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.
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........
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........
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>
<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>
On peut voir ton rendu en ligne et ce que tu désire faire exactement ?
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...