Arrière-plan (Background)

  

Entrons dans le vif du Sujet

R Candidate CSS3 iemzchromeoperasafari
I background-origin

Supporté par l'ensemble des navigateurs dans leurs dernières versions. Cette propriété spécifie l'origine du positionnement de l'imagine de fond (Attention, il faut maîtriser ici le modèle de boîte)

‘border-box’
l'origine de l'image de fond est le coin haut gauche de la bordure
‘padding-box’
l'origine de l'image de fond est le coin haut gauche du padding
‘content-box’
l'origine de l'image de fond est le coin haut gauche du "content"
Exemple CSS3
padding-box
 
content-box
 
border-box
 

R Candidate CSS3 iemzchromeoperasafari
II background-clip

Cette propriété définit la zone qui sera peinte par la couleur de fond :
‘border-box’
le fond est paint jusqu'à la bordure comprise.
‘padding-box’
le fond est paint jusqu'au padding compris (bordure non comprise).
Exemple CSS3
padding-box
 
border-box
 

R Candidate CSS3 iemzchromeoperasafari
III background-size

Elle permet de définir la taille de l'image de fond (par défaut "auto"). Elle s'exprime en unité de longueur ou en pourcentage ou par les 2 mots clefs :

"contain"
L'image est mise à l'échelle de la plus grande des dimensions de la boîte (max[hauteur,largeur]).
"cover"
L'image est mise à l'échelle de la plus petite des dimensions de la boîte (min[hauteur,largeur]).

Elle s'exprime maintenant sans préfixe.

Exemple CSS3
  contain
 
  cover
 

R Candidate CSS3 ie9+mzchromeoperasafari
IV Arrière-plans multiples

CSS3 permet de multiplier les images d'arrière-plan pour une même boîte en utilisant une simple liste avec un séparateur virgule.

Exemple CSS3
Souris sur Fromage
  
Référence CSS3

border-image: source slice width outset repeat;

valeur du paramètre repeat
'stretch’
L'image est étirée pour remplir la bordure
‘repeat’
L'image est simplement répétée
‘round’
L'image est répétée et redimensionnée pouren avoir un nombre entier sur le bordure.
‘space’
L'image est répétée et des espaces sont ajustés entre pour en avoir un nombre entier sur la bordure

R Candidate CSS3 ie10mz3.6+chrome10+opera11.10+safari4+
V Gradient Background (gradient de couleur en arrière plan)

Supporté par toutes les dernières versions des navigateurs (bientôt IE10), il existe des alternatives pour les versions antérieures de IE. (Internet Explorer 5.5 à 8.0 possède la propriété filter: progid:DXImageTransform.Microsoft.Gradient() filter.)

A la syntaxe proposée ci-dessous DOIT être ajouté les préfixes -webkit- , -moz- , .....

Exemple


N'est pas supporté par tous,
formes possibles : circle, ellipse
valeurs possibles de la taille : closest-side, closest-corner, farthest-side, farthest-corner, contain, cover

Référence CSS3
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
  • ce<point> peut être :
    • un coté (left ou top ou ...)
    • ou un coin (left top , left bottom,...),
    • ce point donne la direction (gauche -> droite, haut -->bas, diagonale, ...)
    • ou bien un angle
  • les arrêts <stop> sont une couleur associée à une distance en pixel ou en %

 

Références

http://www.css3.info/preview/background-size/

un outil pour générer les dégradé : http://www.colorzilla.com/gradient-editor/

Avez-vous atteint les objectifs ?
Vous devez pouvoir faire un arrière-plan comme :
Testez-vous

Quel type de dégradé va produire ce CSS sur chrome?

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1)));