Rechercher : dans
Par :

[HTML] Centrer une image de fond dans la page

Dernière réponse le 6 mar 2009 à 14:22:43 sophie26, le 30 jan 2007 à 10:21:33 
 Signaler ce message aux modérateurs

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,

Configuration: Windows XP
Firefox 2.0.0.1

Meilleures réponses pour « [HTML] Centrer une image de fond dans la page » dans :
Javascript - Centrer verticalement une page web VoirPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du...
[Outlook Express] Créer papier à lettre / Insérer image de fond VoirLe papier à lettre est une fonctionnalité de Outlook Express permettant d'égayer les courriers électroniques envoyés en insérant des illustrations (images, texte, etc.) en image de fond. Créer son papier à lettre sous Outlook Express Dans la fenêtre...
Changer de fond d'écran VoirPour Windows XP et versions antérieures Pour Windows Vista Obtenir des fonds d'écran Solution plus rapide Comment changer l'arrière-plan du Bureau ? Un fond d'écran est une image utilisée en arrière-plan de votre bureau. Lors d'une...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
Les arrière-plans VoirInsérer une image en fond Il est possible de définir une image d'arrière-plan pour la page web grâce aux attributs de la balise  : Attribut Effet Visuel BACKGROUND="image" Affiche l'image en arrière...

1

GallyNet, le 30 jan 2007 à 11:35:07
  • +3

"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

Répondre à GallyNet

2

sophie26, le 30 jan 2007 à 11:47:14

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

Répondre à sophie26

3

sophie26, le 30 jan 2007 à 12:15:44

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,

Répondre à sophie26

4

sophie26, le 30 jan 2007 à 13:57:59

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

Répondre à sophie26

13

laurent, le 5 mar 2009 à 01:12:14

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

Répondre à laurent

5

GallyNet, le 30 jan 2007 à 15:47:52

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.

Répondre à GallyNet

6

Orka, le 8 aoû 2007 à 10:49:49

Marche pas sous ff

Répondre à Orka

7

walter ego, le 7 déc 2007 à 13:54:22

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

Répondre à walter ego

8

slimo, le 17 déc 2007 à 16:04:45

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

Répondre à slimo

9

clemenza, le 7 mar 2008 à 02:17:00

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

Répondre à clemenza

10

sfel, le 7 mar 2008 à 10:13:57

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

??
L'ennemi est bête : il croît que c'est nous l'ennemi, alors que c'est lui !
GLOUGLOU ...

Répondre à sfel

11

LegendKiller, le 26 sep 2008 à 09:02:25
  • +1

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


Ok mais on colle sa ou?

pck moi je conné pas bien

Répondre à LegendKiller

12

sfel, le 26 sep 2008 à 12:41:39

Salut, c'est du codage de feuille de style CSS.
L'ennemi est bête : il croît que c'est nous l'ennemi, alors ­que c'est lui !
GLOUGLOU ...

Répondre à sfel

14

 services12move, le 6 mar 2009 à 14:22:43

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

Répondre à services12move
Collection CommentÇaMarche.net