[HTML] Centrer une image de fond dans la page

Question

Bonjour à vous, voila, j'aimerai bien pouvoir centrer une image en image de fond et cela dans la totalité de la page.
Si j'ai bien suivie mes cours, j'appel la fiche css comme ça :
<link href="css.css" rel="stylesheet" type="text/css">

et voici le contenue de ma super grande css ^^ :
body
{
background-image:url(fond.gif);
background-repeat:no-repeat;
margin-bottom: 1px;
left: 50%; 
top: 50%;
}

hum hum je penssais que le left 50% et top 50% corrigerai mon soucie, mais mon image reste toujour cadré en haut a gauche quand j'ouvre une page explorer.

Merci beaucoup de bien vouloir me donner un petit conseil ou de me rediriger vers quelque chose qui pourrait m'aider.

Sophie,

GallyNet · Accepted Answer

"left" et "top" sont deux propriété qui ne s'applique que sur les élémentsqui sont positionné en "absolute" ou en "relative" (grace à la propriété "position").
Ce que tu cherche a faire sera plus du genre :
body
{
background-image:url(fond.gif);
background-repeat:no-repeat;
background-position: center center;
}
ou en une seul ligne :
body
{
background:url(fond.gif) no-repeat center center;
}

Pour plus d'information sur les feuille de style : http://www.yoyodesign.org/doc/w3c/css2/cover.html

sophie26 · Answer

A oui, j'arrive à centrer mon image maintenent.

Cependant, elle est pas centré avec le haut et le bas de page.

Merci beaucoup de me donner un petit coup de main :).

sophie26 · Answer

Je suis allée surfer sur le tuto que tu m'as gentiment passé et donc, après petite apprentissage, j'ai conclue le même code que tu m'as passé.
Cependant, mon arriere plan est toujours centre pour la gauche est la droite, mais elle commence au milieu et monte jusqu'en haut de la page.
Je ne vois donc que la moitié :( .

sophie,

sophie26 · Answer

J'ai réussi à centrer sur mon écren en entrent moi même les valeurs.
 
background-position:50% -20%;

Mais cela va me poser des problèmes avec des écrans plus grand.
Il n'y as pas une autre solution pour centrer le tout automatiquement ?
:(

GallyNet · Answer

Est-ce que ta page est en ligne ? Et si oui est-ce que tu peut mettre un lien pour aller dessus, que je regarde directement ce que ca donne. Ou sinon, donne le code source de ta page (si elle n'est pas trops grande).
Parce que j'ai un peu de mal a imager le resultat qu'il donne. Et cela depend aussi du contenu de la page en question.

Orka · Answer

Marche pas sous ff

walter ego · Answer

je cherche a centrer cette image sur mon myspace, galere galere, si quelqu un pouvait m aider voila le code:

<img src="http://s3.archive-host.com/membres/up/511138679/igivemyzick.gif" alt="Fichier hébergé par Archive-Host.com">

merci d avance!!!

slimo · Answer

Bonjour,
je souhaiterais pour ma part centrer une image en fond d'écran dans un profil myspace sans qu'elle prenne toute la fenêtre, exactement comme dans l'exemple ci-dessous :

https://myspace.com/

Un grand merci d'avance...

clemenza · Answer

bnsr à tous!
Mon souci est que mon image de fond d'écran est bien centrer lorsque j'ouvre mon myspace avec mozzila, mais reste décalé en haut sur la gauche quand j'ouvre mon myspace avec explorer.
Je voulais savoir si il y avait un moyen de corriger cela ou pas,svp?! 
merci

sfel · Answer

bonjour, pourquoi essayerais-tu pas
align="center";
valign="center";

??

LegendKiller · Answer

body
{
background:url(fond.gif) no-repeat center center;
}


Ok mais on colle sa ou?

pck moi je conné pas bien

sfel · Answer

Salut, c'est du codage de feuille de style CSS.

cerami · Answer

comment centrer ce fond?
http://scrapdeserena.over-blog.com/

cerami · Answer

MERCI

CREUNE · Answer

Pour répondre à Sophie, tu souhaiterais avoir un background de façon qu'il soit le même pour tous ?

 body {
color:white;
background-color:white;
background-image:url(images/background.png);
background-attachment:absolute;    ( ou fixed )
background-repeat:no-repeat;
background-size: 100% 100%;



background-size permet de mettre votre image de fond à 100% ( hauteur+largeur ) et quelque soit la résolution de l'utilisateur... méthode efficace. 

En espérant que ça t'aidera.


Cordialement, CREUNE
www.pokergop.fr

Androdoz · Answer

Pour centrer une image de fond il vous suffit de :

1 - Préciser la taille de l'élément;
2 - Utiliser le "margin: auto" ;
comme ceci :

.element {
width: 123px; /* met la taille que tu veut */
margin: 0 auto; /* 0 pour le haut et le bas, et AUTO pour le "right" et le "left" */
}


Salutation !

[HTML] Centrer une image de fond dans la page

16 réponses

Votre réponse

Discussions similaires