En mode projet, épisode 2
La série EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de réaliser une des opérations dont vous pourrez avoir besoin pour votre projet. Le billet est publié en parallèle des fichiers HTML et CSS sur la dropbox.
Un fond en image
Plusieurs d’entre vous ont manifesté l’envie d’avoir une image de fond à dans leur design de site ; la plupart une image de fond dans le body, mais certains une image de fond dans le header, ou ailleurs…
A priori, pas trop dur à faire : on utilise la propriété background-image en CSS et le tour est joué
body {
background-image:url("mon-image-de-fond.jpg");
}
/* ou bien, pour le header */
header {
background-image:url ("mon-image-d-en-tete.jpg);
}
/* bien entendu, les fichiers images utilisés ici sont à la racine de votre site et pas dans un dossier images, et ils portent le nom correspondant à leur URL… */
Une image trop petite
Mais il arrive que l’image ne remplisse pas tout le fond.
Ça peut être voulu, si votre image est un motif destiné à se dupliquer : c’est la règle par défaut de la propriété background-repeat : `background-repeat:repeat`, ce qui veut dire que l’image va se dupliquer sur la longueur et sur la hauteur de son contenant. On utilise cette propriété par défaut pour mettre un « papier peint » en fond de page) : par exemple, si vous mettez en fond de body l’image carrée de 74px de côté ci-contre, elle va se démultiplier en longueur et en hauteur pour tout remplir.
Mais que se passe-t-il si vous vouliez mettre une superbe image de fond et que vous vouliez que cette image remplisse toute la fenêtre de navigateur quelque soit sa taille ? Si votre image est trop petite, et si elle ne peut pas être répétée, votre design risque d’être too moche.
Une image qui remplisse tout
1. Bien choisir son image
La première solution, c’est de choisir une image assez grande pour qu’elle remplisse la fenêtre du navigateur en toute circonstance (par exemple, une image créée pour être un fond d’écran). En anglais, on appelle ces fonds d’écran Wallpaper, et si vous faites une recherche wallpaper creative commons sur un moteur quelconque, il y a des chances que vous tombiez sur de superbes images comme celle-ci… et elles seront libres de droit 😉
L’inconvénient des images de grande taille, c’est qu’elles pèsent lourd, et quand votre site est téléchargé depuis une mauvaise connexion, ou tout simplement depuis un téléphone (la plupart du temps en 3G), le fait que votre image mette du temps à charger peut conduire votre lecteur à… passer à autre chose.
Aussi, même si vous choisissez une grande image, réduisez sa résolution pour qu’elle pèse le moins lourd possible (moins de 200ko, c’est bien); passez-là à la moulinette de jpegmini par exemple.
2. Rendre son image flexible
La 2e solution, c’est de permettre à l’image de s’étirer en fonction de la fenêtre. On sait le faire pour une image intégrée en HTML: on utilise le truc d’Ethan Marcotte pour que toutes les images prennent la taille de leur contenant:
img {max-width:100%; height: auto}Oui, mais quand l’image est insérée en CSS ? C’est là qu’intervient la propriété background-size.
Background-size, le sauveur
Le CSS, c’est comme les apps sur iPhone: y a une propriété pour tout!
Celle qui nous intéresse c’est la propriété background-size.
Pour aller vite, si vous voulez que votre image remplisse correctement le fond de votre body, utilisez
body {
background-image:url("monimagedefond.jpg");
background-size:cover;
}Votre image remplit maintenant le fond et s’étire à volonté.
Enfin, presque: votre image va s’étirer en respectant ses propres proportions: c’est-à-dire correctement en largeur (si vous avez choisi, comme c’est majoritairement le cas, une image au format paysage), mais pas en hauteur (il faudrait qu’elle déborde en largeur, mais on le lui a interdit en utilisant background-size:cover).
Alors, quoi… le problème est-il insoluble?
Mais non, je vous l’ai dit : il y a (aussi) une propriété pour ça !
Fixé et attaché, et le tour est joué
Si on ajoute la valeur fixed à la propriété background-attachment, l’image va remplir tout son parent et ne va plus être mobile, quelles que soient les proportions prises par le parent.
Il faut donc ajouter la petite ligne à notre règle CSS pour le body:
body {
background-image:url(images/monimagedefond.jpg); /* ici, mon image de fond est dans un dossier images */
background-repeat:no-repeat; /* évite que notre image se répète si elle est trop petite */
background-size:cover; /* l'image remplit son parent quel que soit ses proportions */
background-attachment:fixed; /* l'image est attachée à son parent */
}
Et voilà, maintenant, j’ai un fond en plein écran et responsive : elle est pas belle la vie, en long et en large ?
