Le shorthand :
background :
[bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment]
ex :
#00ff00 url("smiley.gif") no-repeat fixed center ;
Aussi possible en CSS3 d'utiliser plusieurs images en background. La première image déclarée sera au premier plan et ainsi de suite.
ex :
background : url('images/cheval.png') 15% 0% no-repeat ,
url('images/chien.png') 28% 100% no-repeat,
white ;background-color :
[transparent | rgb | rgba | hsb | hsba]
background-color : transparent ;
background-color : rgb(255,0,0) ;
background-image :
<
span class="props">[none | url("image.png")]
background-image : url('fond.png') ;
background-position :
[left top | center center | right bottom | % % | px px]
Permet de positionner l'image de fond.
% correspond à width | height du containeur.
background-position : right center ;
background-position : 50% 50% ;
background-position : 50px 50px ;
background-repeat :
[repeat | repeat-x | repeat-y | no-repeat]
Indique si on répète l'image de fond ou pas, sur l'axe X, Y ou les deux.
background-repeat : repeat ;
background-repeat : repeat-x ;
background-repeat : repeat-y ;
background-repeat : no-repeat ;
background-size :
[auto | % % | px px | cover | contain]
Permet de choisir la taille de l'image de fond.
% correspond à la taille du parent, pas de l'image.
px permet de positionner l'image précisément.
background-size : auto ;
background-size : contain ;
background-size : cover ;
background-size : 50% 50% ;
background-size : 50px 50px ;
background-attachment :
[scroll | fixed | local] ;
Spécifie si l'image de fond suit le défilement de la page, de son parent ou reste fixe.
background-attachment : scroll ;
background-attachment : fixed ;
background-attachment : fixed ;
(avec scroll)
background-attachment : local ;
(avec scroll)
background-clip :
[border-box | padding-box | content-box]
Délimite la zone qu'occupe la couleur et l'image de fond.
background-clip : border-box ;
background-clip : padding-box ;
background-clip : content-box ;
background-origin :
[border-box | padding-box | content-box]
Délimite la zone qu'occupe l'image de fond.
WARNING! si background-repeat, les images se rendent jusqu'au border quand même!
background-origin : border-box ;
background-origin : padding-box ;
background-origin : content-box ;