une image de fonds

03 nov. 2007, 09:39

hello,

kle sujet va peut etre sembler trivial mais je voudrais juste mettre une image qui se repete a l'infi derriere mon site (en fonds donc)

la question que je me pose avant de toucher a quoi que ce soit: comment faire ca correctement sachant que j'ai deja plein de balises css dans ma page??

j'ai un peu peur de tout faire sauter et de retrouver mon site facon puzzle

je voudrais jsute mette un gif de 5x5 avec un effet "grid line" (petite ligne de 1px en diagonale alternee avec du blanc)

merci

03 nov. 2007, 10:57

Bonjour

Si comme tu le précises, c'est le fond de ta page, alors il faut travailler en CSS sur le tag <body> ne penses-tu pas ?

Si tu regardes les propriétés CSS (sur le site du W3C, W3CSchool, ou encore Mediabox pour les débutants), tu remarqueras qu'il y a une commande particulière qui gère la répétition de l'image pour un fond donné. Tu peux l'écrire avec toutes les commandes ou en une seule comme suit :

Code : Tout sélectionner

body {
    background:transparent url("dossier/vers/ton/image.png") 0 0 repeat;
}

Décomposons :

transparent ou une couleur (textuelle, hexadécimale ou rgb). Cette couleur est placée derrière l'image de fond ;
l'URL ne doit avoir des guillemets que si tu as un espace dans ton chemin ou un caractère spécial, mais préfères mettre les guillemets à chaque fois ;
0 : position "top", à partir du haut du containeur ;
0 : position "left", à partir de la gauche du containeur, ces deux positions peuvent être exprimées en px, em, % etc. ;
repeat, no-repeat, repeat-x, ou encore repeat-y, désigne le style de répétition souhaitée.

Voilà, je pense que tu vas t'en sortir

.
Mais attention, avec CSS 3, on aura les multi-backgrounds (enfin !), il va te falloir réviser tout ça hehe

. Si tu veux plus de documentations, n'oublies pas que Google est ton ami, que le W3C est ton maître, et que le forum est ouvert.

Bonne journée

.

03 nov. 2007, 11:26

hello,

merci je vais tester ca de suite.

j'ai decouvert tout ca dernierement: vraiment bien foutu le site de W3C pour la validation des pages et des css!

merci d'avoir decompose pour moi aussi

03 nov. 2007, 12:31

Le site du W3C ne sert pas qu'à valider. C'est surtout la plus grosse documentation sur les langages Web de tous les Web lol. Pour cause, c'est eux qui mettent au point les recommandations !
Un peu compliqué à prendre en main au début, je te l'accorde, mais on s'y fait vite.

Bonne journée.

03 nov. 2007, 16:37

À noter que, pour une répétition sans fin, le mot-clé repeat n'est pas nécessaire, puisque, par défaut, une image d'arrière-plan est répétée en CSS. Même motif, même punition pour top et left.

03 nov. 2007, 17:23

...et par conséquent, le code pourrait s'écrire

Code : Tout sélectionner

body {
    background-image: url("dossier/vers/ton/image.png");
}

03 nov. 2007, 18:48

ca marche au poil

03 nov. 2007, 19:43

Par abus, on peut écrire :

Code : Tout sélectionner

body {
    background:url("chemin/vers/ton/image.png");
}

Je ne sais pas si c'est plus long pour l'interpréteur CSS (pour Gecko, il me semble que c'est même plus rapide, mais il faudrait que je retrouve les sources. Information à vérifier donc). L'avantage donc, c'est que tu ne dois pas modifier la commande, mais juste sa valeur si tu veux ajouter une couleur ou une position.
C'est comme écrire :

Code : Tout sélectionner

margin:0 0 0 1em;

à la place de :

Code : Tout sélectionner

margin-left:1em;

Le jours où tu veux mettre une marge en haut, tu ne vas pas éditer tout une ligne, mais juste enlever le premier 0 et le remplacer.

C'est le seule avantage que j'y vois. Même si la remarque de Hubert est importante, i.e. il faut connaître les commandes pour comprendre les raccourcis

.

04 nov. 2007, 13:00

Je ne sais pas si c'est plus long pour l'interpréteur CSS

Pour ma part, je n'ai rien remarqué en matière de lenteur. Si lenteur il doit y avoir, c'est plus du côté de l'image à charger que de la règle CSS.

04 nov. 2007, 14:26

Ce n'est pas une lenteur remarquable. Ca se joue à des millièmes de secondes près. Il faudrait que je retrouve les sources pour voir.

Imagine qu'on utilise les expressions régulières. Elles sont plus au moins rapide selon la forme, mais je ne sais plus comment Gecko traitent cette partie. J'avais tout ça sur mon PC, j'ai pas encore remis ça sur mon Mac.

04 nov. 2007, 18:18

bref, il vaudrait mieux se concentrer sur optimiser la taille de l'image de fond plutôt que d'optimiser le css..

Tiens, une remarque qui me vient à l'esprit, quel serait la taille optimale pour une image d'arrière fond ?

Un jour j'avais fait des essais avec une image 2x2 px, qui avait plus de peine qu'une même image mais déjà répétée quelque fois (16x16 ou plus). L'image plus grande rendait la navigation plus fluide, bien qu'elle nécessitait plus de taille (mais moins de répétitions..)..

04 nov. 2007, 18:27

j'avais fait des essais avec une image 2x2 px, qui avait plus de peine qu'une même image mais déjà répétée quelque fois

En effet c'est logique, une petite image doit être recopiée un plus grand nombre de fois pour couvrir une surface identique. En général je recommanderais quelque chose aux alentours de 64x64, qui de toutes façons, une fois compressée ne prend guère plus de place qu'une plus petite image.

Au fait, concernant les raccourcis, j'ai récemment entendu Nate Koechley dire sur le YUI Theater qu'il avait eu des problèmes en utilisant le raccourci "font" sur certains navigateurs pointilleux (ordre des arguments, présence ou non de tous les arguments) et donc qu'il déclarait systématiquement chaque élément séparément (font-family, font-weight, etc...). Du coup, je me dis qu'il vaut mieux prévenir que guérir, vous n'avez pas envie de recevoir un mail dans trois mois vous demandant pourquoi votre site est invisible sous iPhone ou un truc du genre

04 nov. 2007, 18:47

Du coup, je me dis qu'il vaut mieux prévenir que guérir, vous n'avez pas envie de recevoir un mail dans trois mois vous demandant pourquoi votre site est invisible sous iPhone ou un truc du genre

Pour l'iPhone, il y a le média qui est en jeu.

04 nov. 2007, 19:35

L'iPhone utilise Safari 3 nan ? Et pour l'instant, Safari 3 reste le navigateur avec le meilleur support CSS que j'ai vu (il se bat avec Opera qui supporte mieux certains détails de CSS 1 & 2, mais pas CSS 3).

Sinon, on peut savoir sur quels navigateurs et avec quelles règles il a eu des problèmes (la flemme de regarder la vidéo jusqu'au bout

).

Merci pour l'infos.

une image de fonds

Qui est en ligne