Introduction au CSS3 - Partie 6 : Les arrière-plans

Les nouvelles propriétés permettent un plus grand contrôle de l'élément de fond et fourniront aux designers de nombreuses nouvelles possibilités. Comme d'habitude, des exemples peuvent être trouvés ci-dessous :

Voir la page d'exemples.

Avant le CSS3, la taille de fond était déterminée par la taille de l'image utilisée. Il sera possible avec la prochaine version de CSS de spécifier en pourcentages ou en pixels la taille que doit avoir une image de fond. Ceci permettra de réutiliser des images dans plusieurs contextes et aussi d'agrandir un fond pour remplir une zone de façon plus précise.

Ce qui suit est un exemple simple de redimentionnement du logo de "Design Shack" dans le coin supérieur gauche d'un élément div :

.backgroundsize 
{
    background: url(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;
}

La nouvelle possibilité d'utiliser des fonds multiples est un énorme gain de temps, permettant de réaliser des effets qui précédemment exigeaient plus d'une div. S'il est possible de combiner ça avec la propriété background-size, ce sera un point intéressant.

L'exemple ci-dessous utilise un fond pour la bordure supérieure, un qui se répète verticalement pour les bordures gauches et droites et un troisième pour le bas.

.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;
}

Le CSS3 permet de spécifier comment la position du fond est calculée. La propriété background-origin peut être utilisée pour positionner soit le border, soit le padding, ou encore le content. Ceci permet une plus grande flexibilité en termes de placement d'une image de fond.

Il y a tout un ensemble de nouvelles options relatives au fond disponibles avec CSS3. Comme avec toutes les autres propriétés présentées dans cette série introductive, cela amène à une plus grande flexibilité et facilite beaucoup le développement d'effets auparavant complexes. Bien que ces propriétés ne soient pas encore supportées par la plupart des navigateurs, ça ne devrait plus être trop long avant que vous puissiez créer de renversantes interfaces utilisateurs avec ces nouvelles possibilités.

Nous espérons vraiment que vous avez apprécié cette série et nous vous tiendrons au courant de tous les derniers développements CSS3 qui sortiront dans les mois à venir. C'est avec impatience que nous attendons la prochaine génération des feuilles de style !

Tous mes remerciements à 12monkeys et à Bovino pour leur relecture.

• Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?
• Introduction au CSS3 - Partie 2 : Les bordures
• Introduction au CSS3 - Partie 3 : Les effets de texte
• Introduction au CSS3 - Partie 4: L'interface utilisateur
• Introduction au CSS3 - Partie 5: Les multiples colonnes
• Introduction au CSS3 - Partie 6 : Les arrière-plans