propriétés de la page : centrer une image Résolu/Fermé

Question

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.

Scriptiz · Answer

tu veut la centrer en arrière-plan où en contenu?

frenchcookies · Answer

en arrière plan.

Scriptiz · Answer

Utilise le css alors ;)

Scriptiz · Answer

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

frenchcookies · Answer

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.

Scriptiz · Answer

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

frenchcookies · Answer

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 !

frenchcookies · Answer

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.

Dalida · Answer

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

Scriptiz · Answer

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

frenchcookies · Answer

ok, j'ai du boulot avant de maîtriser !

masi dans Dreamweaver, où on codifie ?

Scriptiz · Answer

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

frenchcookies · Answer

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

Scriptiz · Answer

envoie moi tout ton site zippé à scriptiz[at]uo-hyel[dot]com

remplace [at] par @ 
et [dot] par un .

Je te ferai ça ;)

Dalida · Answer

>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 : et la css tu la modifie pour que la règle ne s'applique qu'à ce là : .arriereplan { background-image: url('tonimage.jpg'); background-repeat: no-repeat; background-position: center; } n'oublie pas le point '.' avant 'arriereplan'.

uhhjk · Answer

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

nrks27 · Answer

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

nrks27 · Answer

Donc recommençons tout depuis 0 .. ! Voila : dans sa page de code html il faut rajouter la ligne suivante juste après le --> 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 et voilaaa!! une explication enfin précises et qui fonctionne ;) NrKs.

nrks27 · Answer

oups trop rapide pour écrire le message..et j'était pas identifié -_- comment faire? rajouter la ligne suivante juste apres le 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 ;)

Dalida · Answer

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.

Propriétés de la page : centrer une image

20 réponses

Discussions similaires