Image de fond

krystof · Message par **krystof** » 02 mars 2007, 20:01

Bonjour,
Est il possible de faire une image de fond que l' on dépace simplement en faisant un "glisser".Actuellement, pour faire une image de fond, je dois passer par photoshop, et adapter sans cesse les images et leur positionj, c' est vriment long.
Comment faire avec NVU pour déplacer les images sur le fond là ou je le souhaite ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; .NET CLR 1.1.4322)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 02 mars 2007, 22:42

Une image de fond ne peut pas être positionné spécifiquement, on peut juste la centrer, la mettre en haut en bas, la faire se répéter, ...

Pour positionner précisément ton image, il faut donc l'utiliser "normalement".
Ensuite tu peux gérer la profondeur, si d'autres éléments doivent apparaître au-dessus (empilement)!

krystof · Message par **krystof** » 02 mars 2007, 23:07

Fabrice.Tres.Net a écrit :Ensuite tu peux gérer la profondeur, si d'autres éléments doivent apparaître au-dessus (empilement)!

Merci et ça se fait comment ça ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; .NET CLR 1.1.4322)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 03 mars 2007, 23:58

Avec les propriétés de la boite accessible depuis la barre d'état de Nvu/ Kompozer, tu cliques sur "<img>" ...

krystof · Message par **krystof** » 05 mars 2007, 14:18

j' ai vu qu' en superposant plusieurs image et en mettant index z 1 ou 2, cela définissait l' image qui serait en premier plan.
Mais ce que je veux faire, c' est passer une seule image derrière du texte.
Je n' y arrive pas avec cette méthode.

EDIT : mince !!! lors d' un changement de taille de texte dans un navigateur internet, les images n' ont pas leur taille modifiées proportionnellement au texte !!!
Du coup, les images passent par dessus le texte.
Comment faire ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; .NET CLR 1.1.4322)

Getro · Message par **Getro** » 05 mars 2007, 16:43

Salut.
Moi aussi j'ai eu ce problème d'image en arrière plan.
Je ne saurais pas te répondre en ce qui concerne ce qui vient de t'arriver mais ce que je peux te conseiller, (si j'ai bien compris) : si ton image possède une adresse url directe, mets dans le code HTML directement de cette façon :

Code : Tout sélectionner

<body
 style="background-image: url(http://www.image_en_arriere_plan.gif);">
</body>

par exemple.
Sinon publi là sur un site qui te fournira une adresse url pour ça.
C'est une solution facile et qui fonctionne à tout les coups.

Cordialement,
Getro.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 2.0.50727)

krystof · Message par **krystof** » 05 mars 2007, 17:21

Je te remercie mais je sais pas travailler avec les codes.
Je fais tout faire par nvu.
Connaitrais tu la manip à faire directement avec nvu ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; .NET CLR 1.1.4322)

Message par **chinon37** » 06 mars 2007, 10:20

Fabrice.Tres.Net a écrit :Une image de fond ne peut pas être positionné spécifiquement, on peut juste la centrer, la mettre en haut en bas, la faire se répéter, ...

je me permets humblement de contester ceci.
- la position peut être ajustée (Kazcades uniquement): gauche, centrée, droite... ou, en passant par l'onglet "général", en entrant une valeur du type:

Code : Tout sélectionner

background-position:100px 20px;

où la première valeur est le décalage vers la droite et la 2eme valeur le décalage vers le bas (par rapport au coin haut gauche du conteneur). les unitès sont les mêmes que pour toute autre position: px, em, %, etc...
Si l'éditeur css est celui d'origine de Nvu (c'est une grave erreur!!), il faut modifier la feuille de style à la main dans le code source.

Neil · Message par **Neil** » 08 mars 2007, 09:57

Je te remercie mais je sais pas travailler avec les codes.
Je fais tout faire par nvu.
Connaitrais tu la manip à faire directement avec nvu ?

Bien sûr. Si ton image vient directement d'une url, c'est d'autant plus facile. Tu copies son adresse et ensuite dans NVU, tu vas dans la source comme ci-dessous et tu recherches dans tes lignes de code : <body>

Et au niveau de cette ligne tu ajoutes derrière body le code suivant :

Code : Tout sélectionner

<body 
 style="background-image: url(http://www.image_en_arriere_plan.gif);"> 
  etc....
</body>

Et donc dans les parenthèses url(tu tapes l'@ de ton image);">

Voilà. ça devrait marcher. Par contre si ton image n'est pas sur internet, tu dois en obtenir une adresse url. Tu peux passer simplement par ImageShackUs et récupérer son @ url. Puis tu suis la même procédure.

J'espère que ça t'a aidé ^^
Neil.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 2.0.50727)

Message par **chinon37** » 08 mars 2007, 11:14

Pourquoi faire si compliqué? Kpz Nvu est WYSIWYG. Son grand intérêt est de ne passer par le code que quand c'est indispensable!
En travaillant en local (sur le disque dur) avant de charger le site chez son hébergeur, il suffit de mettre l'image nécessaire dans le répertoire du site (voire dans un sous-dossier), puis:
clic droit sur body dans la barre de tâches (en bas de l'écran) > styles internes > propriétés du fond > image de fond... aller chercher le fichier puis choisir si on veut une répétition de l'image et l'emplacement sur la page.
Lors du chargement de la page chez l'hebergeur, il faudra penser à charger aussi l'image.
Pour rendre l'adresse de l'image relative à la page (c'est à dire sans avoir à donner l'adresse complète de l'image), si tu utilises Nvu, tu installes l'extension Urlcleaner puis tu fais un nettoyage de la page par outils > nettoyeur de balises...
Dans Kpz, urlcleaner est intégrée

Rappel:pour une même image située dans un sous dossier "images" du répertoire racine de ton site:
adresse absolue:

Code : Tout sélectionner

url(http://www.monsite.fr/images/monimage.jpg)

adresse relative:

Code : Tout sélectionner

url(images/monimage.jpg)

Rappel2: il est fortement déconseillé d'utiliser l'onglet source de Nvu (passablement bogué). Pour retoucher du code, Il vaut mieux utiliser un éditeur texte externe comme Notepad++ (libre). dans ce cas, l'extension Handcoder est ton amie

nota: Si ton espace d'hébergement est suffisant, inutile de passer par un site d'hébergement d'images. Il sera plus simple de gérer ton site si toutes les images sont regroupées dans un sous dossier du site

krystof · Message par **krystof** » 09 mars 2007, 13:50

Fabrice.Tres.Net a écrit :Une image
je me permets humblement de contester ceci.
- la position peut être ajustée (Kazcades uniquement): gauche, centrée, droite... ou, en passant par l'onglet "général", en entrant une valeur du type:
Code : Tout sélectionner
background-position:100px 20px;

Salut, j' ai Nvu, comment puis je faire ?
Il faut que je télécharge kazcades ? je ne sais même pas vraiment ce que c' est. Une extension ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; .NET CLR 1.1.4322)

Message par **chinon37** » 09 mars 2007, 14:09

Evidemment, comme cela a déjà dû être dit une ou deux fois sur ce forum, je te conseille de remplacer Nvu par Kompozer (qui inclut Kazcades): voir ici: http://www.geckozone.org/forum/viewtopic.php?t=51228

Sinon, oui, Kazcades est une extension de Nvu: http://extensions.geckozone.org/KaZcadeS/ qui corrige efficacement l'éditeur css de Nvu.
Il est toujours possible de se passer de Kazcades, mais alors il faut passer par le code et le compléter à la main en ajoutant à la suite de "background-position:" les coordonnées du coin supérieur gauche de l'image de fond.
Mais dans ce cas, on n'a plus en direct la position de l'image:en effet, lors de l'utilisation de l'éditeur css, on a "en direct" sur la page, en arrière de la fenêtre de l'éditeur css, le résultat de la consigne. Le passage par le code masque la fenêtre "aperçu"!

krystof · Message par **krystof** » 09 mars 2007, 20:14

Ok merci pour ces explications.
J' ai téléchargé tout ça en français avec kazcades et on verra ce que ç a donne plus tard, merci.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; .NET CLR 1.1.4322)

Geckozone

Image de fond

Image de fond

Qui est en ligne ?