page-translate

Backgrounds multiples en CSS3

background / CSS3 / Web

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Comment afficher, en CSS3, plusieurs backgrounds dans le même conteneur ?

En CSS "normal", nous devons utiliser plusieurs conteneurs emboîtés les uns dans les autres et/ou du Javascript pour avoir plusieurs backgrounds. Toutefois, grâce au CSS3, nous avons maintenant une synthaxe pour donner plusieurs backgrounds au même élément.

Voici un petit bout de code qui vous montre les nouvelles possibilités de la propriété background:

#multipleBGs {
background: url(photo1.png),
    url(photo2.png),
    url(photo3.png)
;
background-repeat: no-repeat,
   no-repeat,
   repeat-y;

background-position: 0 0,
    30px 70px,
    right top;

width: 400px;
height: 400px;
border: 1px solid #ccc;
}

Merci à David Walsh pour ce code !

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles