Image Arrière plan

[BZHcool]

Bonjour,

Je m'apprete a commencer un nouveau site pour un ami qui désire avoir sur toutes ses pages une image en arrière plan... n'ayant jamais vraiment utilisé cette facette de la codification pour intégrer ceci je vous demande quelques conseilles!!!

Tout d'abord.... quel est le meilleur code pour faire ceci?

et y a t'il un format spécifique pour l'image.... et un poids a ne pas dépasser?

Merci d'avance...

[Denis]

Tout d'abord, pour intégrer l'image, évidemment, je te proposerai de le faire par CSS, qui est la meilleure technologie pour prendre en charge l'aspect visuel/design/présentation d'un document Web. Si tu souhaites intégrer l'image directement au body de la page, tu feras comme suit :

body {background: url(path/de/ton/image.png) no-repeat #fff;}

Si évidemment tu souhaitais l'avoir sans répétition, sur un fond blanc. Tu pourrais l'appliquer à n'importe qel élément HTML pertinent aussi bien.

Pour l'intégrer, tu prendrais cette ligne de code et tu la mettrais soit dans le head de ton document, soit dans un fichier externe. Pour en savoir plus sur les CSS et la propriété background, n'hésite pas à abuser de cette référence très efficace :

http://www.w3schools.com/css/css_background.asp

Bonne chance !

[Dinostrate]

Tout en css : Si tu place l'image dans le body, tu risques d'avoir des problèmes si tu veux aussi par exemple, définir une autre image répétée comme fond.

Si tu veux afficher une image alors que t'as déjà une image répétée sur le fond et placée dans un div, pour placer la nouvelle, tu devras : soit l'intégrer dans un autre élèment, soit superposer deux div, et te méfier de l'ordre d'imbrication des div. Si t'as défini le premier fond par le "body", pas de pb pour placer l'image en question dans un div ou comme tu veux.

On peut toujours superposer plusieurs fonds, mais il faut faire attention à l'imbrication des élèments.

Quant au poids de l'image : question d'appréciation, faire des essais... et puis, une fois qu'elle est dans le cache du nav...

[Denis]

Tout de même, pour le poids des images, faut penser en terme de compression... Plus elle sera légère, plus elle sera performante. C'est très simple. Il faut parvenir à un équilibre juste entre optimisation de compression et détériorisation graphique.

[Dinostrate]

Le problème, c'est je pense surtout quand on veut de la transparence.... j'ai placé une image png avec transparence sur cette page (les fleurs), et elle est un peu lourde....

BZHcool > ce qui est intéressant, c'est la superposition des div :

une image répétée dans body

une autre image répétée dans .Corpus

et enfin, l'image avec transparence dans .CorpusIn3, calée en bas à droite.

[BZHcool]

Merci pour ces infos,

Je viens de tester le code dans un CSS et çà marche...

Maintenant reste à bien configurer l'image (poids) et voir si celà va plaire!

[20cent]

N'hésite pas à poster ton image (originale) ici si tu veux un coup de main pour l'optimisation.

[vanquish]

Ahh l'optimisation d'image j'adore ça, n'hésite pas à demander conseil / poster ton image !

[Denis]

Ça me semble un moment tout indiqué pour pointer vers le travail d'un ami à moi, Darken, qui a conçu un petit logiciel d'optimisation d'images :

http://www.psydk.org/PngOptimizer.php

Comme il le dit lui-même sur son site : "PngOptimizer est un outil d'optimisations de fichiers graphiques sans perte. Il accepte les fichiers PNG, BMP et GIF. Il convertit le tout en fichier PNG optimisé. Ce logiciel fonctionne sous la gamme des Windows 32 bits (95/98/Me NT4/2000/XP ...)."

L'essayer, c'est l'adopter !

Et comme le PNG est le format à préconiser de toute manière... c'est une bonne habitude à prendre !