Niveau : Débutant

Arrière-plans avec CSS 3 Backgrounds

Background-clip

Tutoriel par Simon-K (Infographiste, Concepteur - Designer Graphique et Multimédia, Strasbourg)
Mis à jour le 11 Août 2009. 10952 lectures.
Tags : css, css3, background-clip, clip

Sommaire

  1. Introduction et background-size
  2. Background-clip
  3. Background-origin
  4. Plusieurs images dans un Background
  5. Un dégradé en CSS

Background-clip

La Syntaxe

x-background-clip: border | padding | content (uniquement avec safari)
x = -moz ou -o ou -webkit selon les navigateurs

Définition

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.

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

Illustration

Le fond se limite au contenu :

div {
  ...
  background-image: url("alsa-vert.jpg");
  -webkit-background-clip: content;
}

background-clip:content

Le fond se limite aux marges internes (padding) :

div {
  ...
  background-image: url("alsa-vert.jpg");
  -webkit-background-clip: padding;
}

background-clip:padding

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

div {
  ...
  background-image: url("alsa-vert.jpg");
  -webkit-background-clip: border;
}

background-clip:border;

Implémentation sur les navigateurs actuels

  • Sous IE : impossible
  • Sous Opera : impossible
  • FireFox : -moz-background-clip (v1.0)
  • Safari : -webkit-background-clip (v3.0)

Introduction et background-size

Background-origin