Niveau : Débutant

Arrière-plans avec CSS3 Backgrounds

Tutoriel par (Art Director & Creative Designer, Paris)
Créé le , mis à jour le (93624 lectures)
Tags : css, css3, background-clip, clip

Sommaire


background-clip

La propriété background-clip permet de définir les limites de l'arrière-plan à l'intérieur de la boîte représentée par l'élément.

Syntaxe

 background-clip: [border-box|padding-box|content-box];

Valeurs possibles

  •     "border-box" : L'arrière plan s'étend jusqu'a l'extrême limite de la bordure
  •     "padding-box" : Aucun arrière-plan sera présent en-dessous de la bordure : l'extrême limite sera celle du padding
  •     "content-box" : L'arrière plan se limite au contenu

Le fond se limite au contenu (content-box)

div {
  background-image: url("soif.jpg");
  background-clip: content-box;
}

Background-clip content-box

Le fond est présent même sous les bordures

div {
  border:5px dotted #393838;
  background-image: url(soif.jpg);
  background-clip: border-box;
}

Background-clip border-box

Le fond se limite aux marges internes (padding-box)

div {
  background-image: url("soif.jpg");
  background-clip: padding-box;
}

Background-clip padding-box

Démonstration

Prise en charge

Navigateurs Versions
Internet Explorer Internet Explorer 9
Firefox Firefox 4
Firefox 3.6 (avec préfixe -moz-)
Chrome Chrome 4
Safari Safari 5
Safari Mobile 4
Opera Opera 10.5
Opera Mobile 10
Android Android 2.2
Chrome et Firefox pour Android

Le préfixe -moz-, -webkit-, -ms- ou -o- pourra être requis pour les navigateurs utilisant des pré-versions de cette propriété.