Téléchargement
illégal
Posez votre question Signaler

[HTML] Centrer une image de fond dans la page

sophie26 25Messages postés 17 janvier 2007Date d'inscription - Dernière réponse le 2 janv. 2012 à 13:26
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,
Lire la suite 

[HTML] Centrer une image de fond dans la page »

18 réponses
Réponse
+22
moins plus
"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
Ajouter un commentaire
Réponse
+4
moins plus
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 ?
:(
laurent - 5 mars 2009 à 01:12
Mieux vaut tard que jamais ^^

=>

background-position: top center;

le premier c'est l'alignement verticale et le second vertical.

en espérant que tu n'est pas resté bloqué dessus et que ça pourra en aider d'autre !!!


Laurent
st0cka - 2 janv. 2012 à 13:26
merci
Ajouter un commentaire
Réponse
+3
moins plus
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,
Ajouter un commentaire
Réponse
+1
moins plus
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 :).
Ajouter un commentaire
Réponse
+1
moins plus
Salut, c'est du codage de feuille de style CSS.
services12move - 6 mars 2009 à 14:22
comme ceci, ça fontionne :
background : url(fond.gif) center no-repeat fixed;
Mike - 20 avril 2010 à 23:37
Il faut créer une div, par exemple <div id="background"></div>, la placer juste après le body.

css:

body {
overflow: hidden;
}

#background {
background: url(../img/TON_BACKGROUND) no-repeat;
width: LARGEUR_DE_TON_BACKGROUND;
height: HAUTEUR_DE_TON_BACKGROUND;
left: 50%;
top: 50%;
position: absolute;
margin: -(HAUTEUR_DE_TON_BACKGROUND / 2) 0 0 -(LARGEUR_DE_TON_BACKGROUND / 2) ;

}
Ajouter un commentaire
Réponse
+0
moins plus
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 :

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=23092252

Un grand merci d'avance...
Ajouter un commentaire
Réponse
+0
moins plus
comment centrer ce fond?
http://scrapdeserena.over-blog.com/
Ajouter un commentaire
Réponse
+0
moins plus
MERCI
Ajouter un commentaire
Réponse
-1
moins plus
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.
Ajouter un commentaire
Réponse
-1
moins plus
Marche pas sous ff
Ajouter un commentaire
Réponse
-1
moins plus
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!!!
Ajouter un commentaire
Réponse
-1
moins plus
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
Ajouter un commentaire
Réponse
-1
moins plus
body
{
background:url(fond.gif) no-repeat center center;
}


Ok mais on colle sa ou?

pck moi je conné pas bien
Ajouter un commentaire
Réponse
-3
moins plus
bonjour, pourquoi essayerais-tu pas
align="center";
valign="center";

??
Ajouter un commentaire
Ce document intitulé « [HTML] Centrer une image de fond dans la page » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?