Redimensionner l'image de fond : propriété background-size

Image d'origine

L'image fait 700px par 437px !
Or nous voulons que cette image devienne l'arrière plan (ou image de fond) d'une boîte qui fait 800 par 500. Que faire ???
Avant la solution était de redimensionner l'image aux dimensions de la boîte avec un logiciel tel paint.

Avec CSS3 il suffit d'utiliser la nouvelle propriété CSS background-size avec la valeur cover.

Solution

Le code CSS (extrait)

div {width : 800px ; height :500px; background-image :url(../images/paysage_hiver.jpg) ; background-size : cover ; border :1px solid black ; position : relative ; margin : 20px auto 20px auto ; }

La grande nouveauté : la propriété background-size avec la valeur cover.
La taille de l'image s'adapte à celle de la boîte DIV.
La propriété CSS background-size spécifie la taille de l'image dans l'arrière plan. Elle est aussi très utile pour insérer plusieurs images de fond dans la même boite : voir page suivante.

Animation gérée par CSS

En fait cette image de fond est le décor d'une animation 2D via CSS.
Avec quelques lignes de code HTML & CSS j'insère deux gifs animés dans la boîte et je déplace ces éléments.

Je n'en dis pas plus pour le moment car dans ce tuto je consacre plusieurs pages aux animations avec CSS.
Retour menu