CSS 3 et AIR - 2ème partie : la propriété background

Les fonds multiples

CSS 3 prévoit dans le brouillon de sa recommandation la possibilité d'inclure plusieurs images de fond à un même bloc. On conserve bien évidemment la possibilité de les positionner et de les faire se répéter ou pas. Pour notre plus grand bonheur (en tout cas le mien), Adobe AIR supporte complètement cette possibilité que nous offre CSS 3. La déclaration se fait comme suit :

div {
    border:1px dashed #0f0;
    background-image:url(cat.png), url(car.png), url(ball.png);
    background-repeat:repeat-y, no-repeat, repeat-x;
    background-position:15px 0, 50% 100%, bottom right;
}

Ce qui donne en image (non je ne suis pas un artiste au cas où vous en douteriez) :

Il suffit de déclarer les différentes images séparées par des virgules et le tour est joué. En ce qui concerne les propriétés de répétition et de positionnement, on les déclare dans le même ordre et également séparées par des virgules.

Nouvelles valeurs pour la répétition : round et space

Les valeurs round et space pour la propriété background-repeat prévoient de donner la possibilité d'ajuster le fond à son conteneur lors de la répétition et d'empêcher que le fond soit tronqué. Je dis bien "prévoient" parce que ces deux valeurs ne sont pas (encore ?) supportées dans AIR.

Pour votre culture personnelle (et la mienne), voici quand même la déclaration :

div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    background-repeat:round;
}

Le clipping de l'image de fond

Qu'est-ce que le clipping ? Il s'agit de la zone dans laquelle l'image de fond sera dessinée. Elle prend quatre valeurs différentes :

• padding-box : l'image de fond est dessinée à l'intérieur de la zone de padding du bloc. Elle sera tronquée en dehors.
• border-box : l'image de fond est dessinée à l'intérieur de la zone des bordures du bloc.
• content-box : l'image de fond est dessinée à l'intérieur de la zone de contenu du bloc, autrement dit à la limite intérieure du padding.
• no-clip : pas de clipping.

Cette propriété n'est pas supportée non plus dans Adobe AIR.

Exemple de déclaration :

div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    background-clip:content-box;
}

Image de fond et point d'origine

Cette propriété permet de définir le point à partir duquel l'image de fond est dessinée. Comme pour le clipping, cette propriété prend les valeurs : padding-box, border-box et content-box. Pas plus de chance avec cette propriété : aucune des valeurs n'est supportée pour le moment par AIR.

div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    background-origin:padding-box;
}

Taille de l'image de fond

Cette propriété a pour but de donner un contrôle sur la taille de l'image de fond de façon homothétique. Il est possible d'affecter une largeur, une hauteur, un pourcentage, etc. En plus de ces valeurs numériques, la propriété accepte deux valeurs supplémentaires qui ont très peu de différences :

• contain : redimensionne l'image afin qu'elle tienne à l'intérieur de la zone de positionnement du fond.
• cover : redimensionne l'image afin qu'elle recouvre complètement la zone de positionnement du fond.

Bon et celle-ci elle fonctionne dans AIR ? Oui et non. Les valeurs numériques sont acceptées. Contain et cover ne le sont pas. Il faut en plus de cela passer par la déclaration propre à Webkit, en ajoutant le suffixe -webkit- :

div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    -webkit-background-size:100% 100%;
}

Cet article touche à sa fin. Le support des nouvelles propriétés background- est plutôt faible dans AIR. Néanmoins, on peut se consoler d'avoir déjà un support partiel, notamment en ce qui concerne les fonds multiples et les tailles de fond. Ce n'est qu'un début, mais un bon début. La prochaine fois : la propriété border.

Salut !