[HTML] Centrer une image de fond dans la page [Fermé]

Signaler
Messages postés
25
Date d'inscription
mercredi 17 janvier 2007
Statut
Membre
Dernière intervention
14 avril 2007
-
 Androdoz -
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,

16 réponses

Messages postés
434
Date d'inscription
mardi 1 juin 2004
Statut
Membre
Dernière intervention
15 décembre 2008
379
"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
31
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Messages postés
25
Date d'inscription
mercredi 17 janvier 2007
Statut
Membre
Dernière intervention
14 avril 2007
9
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 ?
:(
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
Messages postés
25
Date d'inscription
mercredi 17 janvier 2007
Statut
Membre
Dernière intervention
14 avril 2007
9
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,
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 :).
Messages postés
1640
Date d'inscription
lundi 18 juin 2007
Statut
Membre
Dernière intervention
15 juillet 2009
418
Salut, c'est du codage de feuille de style CSS.

comme ceci, ça fontionne :
background : url(fond.gif) center no-repeat fixed;
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) ;

}
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...
Messages postés
19
Date d'inscription
vendredi 22 août 2008
Statut
Membre
Dernière intervention
25 janvier 2012
1
comment centrer ce fond?
http://scrapdeserena.over-blog.com/
Messages postés
19
Date d'inscription
vendredi 22 août 2008
Statut
Membre
Dernière intervention
25 janvier 2012
1
MERCI
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
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 !
Messages postés
434
Date d'inscription
mardi 1 juin 2004
Statut
Membre
Dernière intervention
15 décembre 2008
379
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.
Marche pas sous ff
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!!!
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
Messages postés
21
Date d'inscription
jeudi 14 août 2008
Statut
Membre
Dernière intervention
24 mai 2009
1
body
{
background:url(fond.gif) no-repeat center center;
}


Ok mais on colle sa ou?

pck moi je conné pas bien
Messages postés
1640
Date d'inscription
lundi 18 juin 2007
Statut
Membre
Dernière intervention
15 juillet 2009
418
bonjour, pourquoi essayerais-tu pas
align="center";
valign="center";

??