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 90% par 500px. 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 pour que la taille de l'image s'adapte à celle de la boite.

Solution

Le code CSS (extrait)

div {width : 100% ; 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 de fond s'adapte à celle de la boîte DIV (qui elle même s'adapte à la taille de l'écran :largeur =100% de celle du conteneur).

La propriété CSS background-size 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.

Les règles de style pour l'animation

.fondeur {position:absolute ; left : -5% ; height : 60px;} #fondeur1 {top : 380px ; } #fondeur2 {top : 400px ; } @keyframes deplacer { from {left : -5% ; } to {left :105% ; top : 360px; } } #fondeur1 {animation : deplacer 14s 0s infinite linear ; } #fondeur2 {animation : deplacer 12s 2s infinite linear ; }

Le code HTML pour insérer les "sprites" dans le décor

<div> <img src ="../images/fondeur.gif" class ="fondeur" id ="fondeur1" /> <img src ="../images/fondeur2.gif" class ="fondeur" id ="fondeur2" /> </div>

Si vous ne comprenez rien à ce code CSS qui permet d'animer les "sprites" il vous faut visiter la partie "transitions,transformations et animations CSS3" dans ce tuto.
Retour menu