[HTML] Centrer une image de fond dans la page

A voir également:[html] centrer une image de fond dans la pageHtml mettre une image en fond ✓ - Forum - HTML Html image de fond toute la page ✓ - Forum - HTML Centrer une image de fond en haut CSS ✓ - Forum - CSS HTML Centrer 3 images ✓ - Forum - HTML [HTML]Centrer une image de haut en bas ✓ - Forum - HTML

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,

Forum

A voir également:[html] centrer une image de fond dans la pageHtml mettre une image en fond ✓ - Forum - HTML Html image de fond toute la page ✓ - Forum - HTML Centrer une image de fond en haut CSS ✓ - Forum - CSS HTML Centrer 3 images ✓ - Forum - HTML [HTML]Centrer une image de haut en bas ✓ - Forum - HTML

Web: www.shapebootstrap.net

16 réponses

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

"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

Dire « Merci » 31

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

CCM 54569 internautes nous ont dit merci ce mois-ci

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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 ?
:(

Reply
réponses:
  • auteur

    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

  • auteur

    merci

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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,

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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 :).

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

Reply
réponses:
  • auteur

    comme ceci, ça fontionne :
    background : url(fond.gif) center no-repeat fixed;

  • auteur

    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) ;

    }

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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...

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

MERCI

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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 !

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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.

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

Marche pas sous ff

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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!!!

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

body
{
background:url(fond.gif) no-repeat center center;
}


Ok mais on colle sa ou?

pck moi je conné pas bien

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

??

Reply

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed