Accueil

Tutoriel CSS - sommaire

Révisions CSS2

CSS - introduction CSS : les principes CSS2 : principales propriétés CSS2 et les tableaux HTML Les éléments 'block' ou boites La numérotation des balises 'titre' Feuille de style pour impression La propriété POSITION Exprimer les couleurs Les fichiers "spritesheet"

Nouveautés CSS3

Media queries pour responsive design Nouveaux sélecteurs : pseudo-classes et pseudo-éléments Boites avec angles arrondis voire ombrées Images découpées - propriété clip-path & shape-outside Le codage HSL et HSLA des couleurs Nouveaux effets pour le texte Dégradés linéaires et radiaux avec CSS
Les filtres avec CSS Le raccourci "background" enrichi Le multicolonnage Révolution dans le positionnement : grid layout & flexbox Feuille de style avec des variables Intérêt du codage RGBA ou HSLA

Transformations, transitions & animations

Les transformations 2D Les transitions Transformations 2D avec transition Les transformations 3D - principes Transformations 3D avec transition Premières animations CSS Animer des transformations 2D ou 3D Une animation 3D complexe

Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

CSS : le raccourci "background" enrichi dans la version 3

Méga propriété background : révisions

Exemple


La version 3 de CSS est très riche en nouveautés.
Blabla ...
Blabla ...
Blabla ...
Blabla ...

Le code correspondant

<div style ="width : 80%; margin : auto ; height : 200px ; background : url(../images/css3_logo.jpg)"> <p style ="color : red;"> <br>La version 3 de CSS est très riche en nouveautés. <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... </div>

Si vous voulez superposer du texte sur une image il faut créer une boite contenant l'image via la propriété background
Cette image doit être relativement transparente afin que le texte reste lisible.
Par défaut si l'image est plus petite que la boite (comme dans l'exemple) elle est répétée par défaut sur les deux axes.

Images de fond multiples

Désormais il est possible d'avoir en arrière plan d'une boite plusieurs images !
On peut utiliser le raccourci background ou les différentes propriétés préfixées "background" : background-image, background-color, background-repeat, background-position mais aussi background-size (nouveauté)

Utilisation de la méga propriété background

Une boite contenant 5 images positionnées proprement !

Le code correspondant

... <style> div {width : 100% ; height : 600px ; border : 1px solid black ; position : relative; } div img#nus {width :15%;} #nus{background: url(../images/nue1.png) no-repeat top left, url(../images/nue2.png) no-repeat top right, url(../images/nue3.png) no-repeat bottom left, url(../images/nue4.png) no-repeat center center, url(../images/nue5.png) no-repeat bottom right ; background-color : purple ; } ... <div id = 'nus' > </div> ...

Pour la boite identifiée nus la méga propriété CSS background comprend cinq séries de valeurs séparées par une virgule car il y a insertion de cinq images dans cette boite.
Pour chaque image on précise son chemin relatif, le terme no-repeat (pour que l'insertion soit unique), le positionnement de l'image sur les deux axes (axe X, axe Y).
On peut combiner des images et une couleur de fond en "background". Ici un fond de couleur "purple".
Ici les images sont intégrées avec leur taille réelle : pas de redimensionnement. Donc avec un ordiphone c'est très moche !!!

Les différentes images ont été produites avec Inkscape à partir de la même photo.
A chaque fois un filtre a été applqué à la photo puis il y a eu exportation au format PNG de la nouvelle image.

Utiliser les propriétés background-image, background-position, background-size, etc.

On peut utiliser les propriétés simples plutôt que le raccourci background.
On peut redimensionner les images insérées.

Ci-dessus boite remplie de rose et avec trois images positionnées et redimensionnées.

Le code correspondant

#cartes { background-image : url(../images/as_pique.jpg) , url(../images/as_coeur.jpg), url(../images/as_trefle.jpg); background-position : 0% 0px, center center, 100% 400px ; background-repeat : no-repeat, no-repeat, no-repeat; background-size : 15%, 100px, 15% ; background-color : pink ; } ... <div id ="cartes"> </div> ...

Pour chaque propriété préfixée "background" on a trois valeurs (ou couple de valeurs) séparées par des virgules.
Pourquoi trois ? Parce qu'il y a trois images insérées !
Remarquez les différentes façons d'exprimer le positionnement de chaque image : en pixels, avec des mots clés voire en pourcentages. A chaque fois il y a couple X,Y pour préciser la position dans le repère cartésien.
Notez les différentes façons d'exprimer la largeur de chaque image : en pixels ou en pourcentage.

Adapter l'image de fond unique à son conteneur

Dans la section précédente vous avez découvert la nouvelle composante de background : background-size. La valeur de cette propriété peut être aussi "cover".

Problématique

Nous avons une image qui fait 700 pixels par 437.
Et nous voulons que cette image devienne le "background" d'une boite qui fait 100% de large (par rapport à BODY) par 500px. Que faire ???

Avant la solution était de redimensionner l'image aux dimensions de la boite avec un logiciel tel paint.
Avec CSS3 il suffit d'utiliser la nouvelle propriété CSS background-size avec la valeur cover.

Nous voulons aussi toujours dans la boite, insérer mais cette fois en premier plan, deux gifs animés susceptibles d'être déplacés via une animation CSS.
Il faut donc que ces images soient des éléments de la page. Il faut alors utiliser la balise IMG à l'intérieur du DIV conjointement avec les propriétés position : absolute; top & left : positionnement en absolu des images dans le DIV.

Solution

Le code correspondant

La balise DIV contient deux éléments IMG.

<div style= "width : 100% ; height :500px; background-image :url(../images/paysage_hiver.jpg) ; background-size : cover ; border :1px solid black ; margin : 20px auto 20px auto ;" > <img src ="../images/fondeur.gif" style ="position : absolute ; top: 400px; left : 50%; width : 8%;" /> <img src ="../images/fondeur2.gif" style ="position : absolute ; top: 400px; left : 80%; width : 8%;" /> </div>

La taille de l'image de fond s'adapte parfaitement aux dimensions de la boite DIV !
La nouveauté : la propriété background-size avec la valeur cover.

Les gifs animés sont redimensionnés et positionnés en absolu dans le DIV.
Attention cela suppose que la boite DIV soit elle-même positionnée en absolu (ou relatif ou fixe)

Avec CSS3 la propriété background peut avoir aussi commme paramètres linear-gradient OU radial-gradient afin de définir un dégradé linéaire ou radial.