Création d'un background pour un débutant

Bonjour la Commaunté,

Je fréquente souvent le forum excel, mais c'est la premlère fois que je viens sur celui du html. Et pour cause, je vais créer le site de ma boite.
Pour commencer, je voudrais créer un background style "métal poli" avec un dégradé vers un "métal doré" (partie réalisé avec photoshop), mais pour ne pas alloudir la page, j'ai un ami qui m'a dis de réduire mon image dans le sens horizontal à 1 pixel et ensuite dans une feuille de style, de répéter cette image vers la droite indéfiniment.

Deux questions se posent à moi :

1 - Ok dans le sens horizontal, mais dans le sens vertical je mets quelle "longueur" ? Ya - t il aussi un moyen de répéter ?

2 - Débutant dans les css, pouvez-vous me donner la formule permettant de répéter cette image ?

Je vous remercie pour votre aide

Bonjour,

solorac a écrit :
j'ai un ami qui m'a dis de réduire mon image dans le sens horizontal à 1 pixel et ensuite dans une feuille de style, de répéter cette image vers la droite indéfiniment.

Oui, c'est une bonne méthode. Par contre, ne pas réduire à 1px mais garder une vingtaine ou une cinquantaine de pixels en largeur, même si tous les pixels d'une même ligne horizontale sont identiques. Ça permet d'éviter des problèmes de performance avec certains navigateurs sur les veilles machines (répéter une image 2000 fois en largeur, ça n'est pas tout à fait anodin en termes de performances).

solorac a écrit :
1 - Ok dans le sens horizontal, mais dans le sens vertical je mets quelle "longueur" ? Ya - t il aussi un moyen de répéter ?

Tu peux travailler avec une hauteur donnée, par exemple 400px ou 800px ou 1200px (suivant le rendu voulu) et finir sur une couleur unie (la couleur du bas de ton image).
Si tu veux répéter le dégradé sur toute la hauteur de la page, il te faut un dégradé de la couleur A vers la couleur puis à nouveau vers la couleur A (tout ça dans le sens de la hauteur), ainsi la répétition en hauteur marchera correctement.

solorac a écrit :
2 - Débutant dans les css, pouvez-vous me donner la formule permettant de répéter cette image ?

Tu peux regarder du côté des propriétés CSS background-color, background-image, background-repeat et background-position. Il y a aussi la propriété background qui est un raccourci de toutes les précédentes.

Documentation:
- http://www.w3.org/TR/CSS21/colors.html#background (spécification, en anglais)
- http://wiki.mediabox.fr/documentation/css#proprietes_de_couleur_et_de_fond (en français)