Niveau : Débutant

Arrière-plans avec CSS 3 Backgrounds

Background-origin

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

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-origin

La Syntaxe

x-background-origin: border | padding | content
x = -moz ou -o ou -webkit selon les navigateurs

Définition

Positionne la zone de l'arrière plan.(l'origine de l'image d'arrière plan)

  • border : La position de l'arrière plan est relative au bord : l'image peut donc aller derrière les bords
  • padding : La position de l'arrière plan est relative au padding
  • content : La position de l'arrière plan est relative au contenu

Illustration

div {
  padding: 30px;
  width: 500px;
  height: 200px;
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg");
  -webkit-background-origin: content;
  background-repeat: no-repeat;
}

background-origin:content 

div{
  ...
  -webkit-background-origin:padding;
}

background-origin:padding 

div{
  ...
  -webkit-background-origin:border;
}

background-origin:border

Implémentation sur les navigateurs actuels

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

* Jusqu'à IE7, la valeur par défaut est background-origin: border. A partir de IE8 la valeur est background-origin: padding.

Background-clip

Plusieurs images dans un Background