Propriétés de la page : centrer une image [Résolu/Fermé]

Signaler
Messages postés
20
Date d'inscription
samedi 16 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007
-
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
bonjour,

j'aimerais centrer une image (logo) sur une page :
http://theranchhands.free.fr/pages/groupeintro.htm

j'utilise dreamweaver 4.
pour l'instant je l'ai mise en image d'arrière plan, elle est donc dupliquée.

mais je voudrais avoir une seule fois l'image, centrée en largeur et hauteur. si ce n'est pas possible (on n'a pas tous la même taille écran), j'aimerais au moins pouvoir la centrer horizontallement. Or quand je la mets dans "tracé de l'image" elle est calée à gauche.

merci d'avance.

20 réponses

slt mon image darriére plan saffiche mais pas les document
1
Merci

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

CCM 65492 internautes nous ont dit merci ce mois-ci

tu veut la centrer en arrière-plan où en contenu?
Je veux centrer l'image et le contenu dedans
( je sais que je t'ai écris tantot mais j'ai refais des tests)
J'ai centré ma page pour le web et le contenu dedans bouge gggrrrrr
l'image se centre mais pas le contenu.
Alors quand ma fenetre sur le web est petite ca focntionne tout a l'air beau j'aggrandi ma page web et l'arriere plan est centré mais le contenu reste plutot a droite, le contenu ne suis pas l'image d"arriere plan ?!?
Je ne sais aps si c'est plus clair mais peux-tu m'aider ?
Macha
Messages postés
20
Date d'inscription
samedi 16 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007

en arrière plan.
Utilise le css alors ;)


<html>
<head>
<style type="text/css">
body
{ 
background-image: 
url('tonimage.jpg');
background-repeat: 
no-repeat;
background-position:center center;
}
</style>
</head>

<body>
</body>
</html>
<html>
<head>
<style type="text/css">
body
{
background-image: url('tonimage.jpg');
background-repeat: no-repeat;
background-position:center center;
}
</style>
</head>

<body>
</body>
</html>
Messages postés
20
Date d'inscription
samedi 16 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007

Heuhhhhh je n'y arrive pas. comme je n'y connais rien j'ai tout copié et collé. ca me donne une page grise...

1- faut il que je colle tout ?
2- le chemin vers l'image est il bon ?
3- tu parles de CSS : j'ai effectivement une feuille de style, mais je ne m'en sers que pour mettre en forme les titres.
si tu as une feuille de style déjà liée à ta page ne copie que ceci dans ta page de style :

body
{
background-image: url('tonimage.jpg');
background-repeat: no-repeat;
background-position:center center;
}


Et vérifie qu'il n'y a pas déjà un conteneur body, si il y en a déjà un copy ceci dedans :

background-image: url('tonimage.jpg');
background-repeat: no-repeat;
background-position:center center;



ps: l'url de l'image c'est toi qui doit l'entrer en fonction de ton image ;)
Messages postés
20
Date d'inscription
samedi 16 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007

je n'ai jamais fait ça. alors quand je vais dans modifier feuille de style, j'ai le choix :
- lien
- modifier
- nouveau

si je choisis modifier feuille, j'ai :
- lien
- nouveau

puis si j'ai choisit nouveau :
- sélecteur : a:.....
- type (utiliser le sélecteur CSS)


où dois je aller pour coller le bout programme ????

merci pour ton aide !
Messages postés
20
Date d'inscription
samedi 16 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007

faute d'avoir la réponse, j'ai feinté : j'ai inséré une image sur la page.

mais je reste intéressée de savoir où aller dans les CSS pour coller le prog proposé ci-dessus.
2 center la centre aussi horizontalement :P

ou alors tu peut mettre :

background-position: 50% 50%;

Le premier 50% représente la position horizontale de la page, le deuxième sa position verticale.

par exemple, background-position: 100% 0%; te mettra ton image de fond en haut a droite de ta page.
background-position: 0% 100%; te mettra ton image de fond en bas à droite

cette page est très bien faite : http://css.mammouthland.net/image_de_fond.php
Suite a cette discution fort interessante j'ai fais center center 2 fois l'image est parfaitement centrée
Mais le problème qui ce pose c'est que je ne peux plus me fier au marge pour ajuster mon écriture .
J'ai une image arrirere plan et mon text sur dreamveawr tout est beau et quand je transfert sur le web burkk tout est décentré je parle de mon text.... comment faire pour me fier au marge quand on y ajoute center center ?
Messages postés
20
Date d'inscription
samedi 16 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007

ok, j'ai du boulot avant de maîtriser !

masi dans Dreamweaver, où on codifie ?
Dans dreamweaver, tu clique sur le bouton nouvelle règle CSS, ensuite tu choisi une règle de balise, et tu choisi la balise body. Puis dans Arrière-plan tu as tout ce qu'il te faut ;)
Messages postés
20
Date d'inscription
samedi 16 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007

merci Scriptiz, j'ai trouvé. mais je ne peux pas y mettre le code. j'ai essayé de bidouiller, mon image ne veut pas se centrer malgré ce que je demande. et la cata c'est que l'image mise en arrière plan apparait sur toutes mes pages !

je crois que je vais en rester à mon image collée dans un calque :
http://theranchhands.free.fr/pages/groupeintro.htm

c'est ce que je voulais, mais je n'ai peut être pas utilisé la méthode optimale.

merci à tous
envoie moi tout ton site zippé à scriptiz[at]uo-hyel[dot]com

remplace [at] par @
et [dot] par un .

Je te ferai ça ;)
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
908
>Scriptiz
c'est dommage de ne pas laisser les gens apprendre par eux même.
dommage encore que je n'ai pas le temps de coder une démo parce que je ne suis pas d'accord avec ce que tu avances au sujet du positionnement de l'arrière plan et rien ne vaut un bon exemple.

>frenchcookies
si tu veux que l'arrière plan ne s'applique qu'à une page.
dans la page tu appliques une classe à la balise <body> :
<body class="arriereplan">

et la css tu la modifie pour que la règle ne s'applique qu'à ce <body> là :
.arriereplan
{
background-image: url('tonimage.jpg');
background-repeat: no-repeat;
background-position: center;
}

n'oublie pas le point '.' avant 'arriereplan'.
c'est vraiment nébuleux tout ça !!..ou plutôt nimporte quoi..n'importe qui aurait pu trouver qu'il fallai mettre
background="*.Jpg" ou align "center"

le truc, c'est ou !? osef si c'est des feuilles de css..et des commandes qui sortent de nul part^^ si on sait correctement comment faire!

Une explication plus précise?!

Tkx
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
908
salut,

qu'est-ce que tu racontes ?
Donc recommençons tout depuis 0 .. !

Voila : dans sa page de code html il faut rajouter la ligne suivante juste après le </head>
<body bgcolor="#F5F5F5" background="images/AP.jpg">

--> le image/AP.jpg est le dossiers et le fichiers de l'images..

ensuite il faut crée une feuilles css..comment faire? avec le bloc note!!

et on y rajoute les ligne suivante ! :

body{
background-position:center;
}

tout simplement! ensuite on sauvegarde et on modifie l'extension de .txt en .css (n'oublier pas de modifier les options de windows pour voir les extensions..-_- ->Outils / Options des dossiers / Affichages..)

ce n'est pas fini!!

il faut ensuite joindre la feuilles css qui se trouve dans le même dossier que sa page html

comment faire? rajouter la ligne suivante juste apres le <head><link rel="stylesheet" type="text/css" href="BackGround.css">


et voilaaa!! une explication enfin précises et qui fonctionne ;)

NrKs.
Messages postés
43
Date d'inscription
mardi 15 janvier 2008
Statut
Membre
Dernière intervention
2 août 2009
3
oups trop rapide pour écrire le message..et j'était pas identifié -_-

comment faire? rajouter la ligne suivante juste apres le <head>

<link rel="stylesheet" type="text/css" href="BackGround.css">

sans oublier de remplacer le BackGound.css par le nom que vous avez attribué au fichier^^

et voilaaa!! une explication enfin précises et qui fonctionne ;)
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
908
oui, mais elle est bâtarde ta solution.
tu utilises à la fois des attributs HTML et des règles CSS et tu trouves ça brillant ?!

comprends ce que tu fais avant de donner de si bons conseils.
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
908
salut,

ce n'est pas un 'prog' mais un code !

pour débuter en css :
ccm
mammouthland

si elle est purement décorative, il faut mettre l'image en arrière plan.
pour la propriété {background-position} un seul 'center' suffit.

body{
background-position:center;
}