Pour la dernière partie de notre série d'introduction à CSS3, nous allons prendre un regard sur les propriétés d'arrière-plan . Il s'agit notamment de la taille d'arrière-plan, en utilisant plus d'un arrière-plan pour un élément, et le fond d'origine (qui les effets de la position d'un arrière-plan).

Les nouvelles fonctionnalités permettent un meilleur contrôle de l'élément d' arrière-plan va fournir aux concepteurs tout un éventail de nouvelles possibilités.

Taille de fond

Avant CSS3, taille d'arrière-plan a été déterminée par la taille réelle de l'image utilisée. Il sera possible avec la prochaine révision CSS pour spécifier en termes de pourcentage ou pixels la taille d'une image de fond devrait être. Cela vous permettra de réutiliser des images dans plusieurs contextes différents et aussi d'élargir un fond pour remplir une zone avec plus de précision.

Ce qui suit est un exemple simple de redimensionner d'un logo comme un arrière-plan dans la zone en haut à gauche d'un div:

.backgroundsize { background: url(http://www.bestcours.com/images/logo.gif); 
-webkit-background-size: 137px 50px; 
-khtml-background-size: 137px 50px; 
-o-background-size: 137px 50px; 
background-size: 137px 50px; 
background-repeat: no-repeat; 
padding: 60px 5px 5px 10px; 
border: 3px solid #ddccb5; }

Backgrounds multiples

La capacité d'utiliser arriére-plan multiples est un grand gain de temps, vous permettant d'obtenir des effets qui nécessitaient auparavant plusieurs div. Que ce sera possible de combiner cela avec background-size sera intéressant à voir.

L'exemple ci-dessous utilise un arrière-plan pour la bordure supérieure, on répétait à la verticale pour les bordures gauche et droite et un troisième au fond.

.multiplebackgrounds { height: 150px; 
width: 270px; 
padding: 40px 20px 20px 20px; 
background: url(top.gif) top left no-repeat, 
url(bottom.gif) bottom left no-repeat, 
url(middle.gif) left repeat-y; }

origine de fond

CSS3 vous permet de spécifier comment la position de fond est calculée. La propriété background-origin peut être configuré pour démarrer à partir de positionnement soit la bordure, le rembourrage, ou le contenu. Cela permet une plus grande flexibilité en termes de placer une image de fond.

En conclusion ...

Il ya toute une variété de nouvelles options de base disponibles avec CSS3. Comme avec tous les autres modules abordés dans cette série d'introduction, elle conduit à une plus grande flexibilité et rend beaucoup plus facile de recréer des effets précédemment complexes. Bien que non pris en charge par la plupart des navigateurs pour le moment, il ne devrait pas être trop long avant que vous pouvez obtenir la création d'interfaces utilisateur avec des superbes ces nouveaux ajouts.

Nous espérons vraiment que vous avez apprécié cette série, et nous allons vous tenir au courant de toutes les dernières évolutions CSS3 comme ils se produisent au cours des prochains mois. Voilà avec impatience la prochaine génération de feuilles de style!