Backgrounds level 3

● ● ● ● ● ● ● ●

From the demo:

p {
  background-image: 
  url(../images/svg/sunglasses.svg), 
  url(../images/postit.png);
  
  background-size:4em auto, 100% 100%;
  background-position: bottom right, 0 0;
  background-repeat: no-repeat, no-repeat; 
}   

Backgrounds level 3

● ● ● ● ● ● ● ●

From the demo:

div:nth-child(1) {
  background-size: contain }
div:nth-child(2) {
  background-size: cover }

Values for 'background-size' property:

• px, em, %, auto ('auto' keeps the aspect ratio)
• contain (image is entirely visible)
• cover (keep ratio but width or height can be cut)

Backgrounds level 3

● ● ● ● ● ● ● ●

From the demo :

div:nth-child(1) {
  border-color:#5f749f;
  background-size:100px auto, 100% 100%;
  background-origin:border-box;
  background-position:85% 10px, top left;
}

Backgrounds level 3

● ● ● ● ● ● ● ●

From the demo:

body{ background-attachment:fixed; }   
   
div:nth-child(1){
	background-attachment:local, local; }
div:nth-child(2){
	background-attachment:local, scroll; }

'local' = the background is attached at the element itself.
'scroll' = the background is attached to the window.
(April 2012: Webkit ok, Firefox no)

Backgrounds level 3

● ● ● ● ● ● ● ●

New values for 'background-position'
From the demo:

div:nth-child(1){
  background-position: right 30%   bottom 3px }

Instead of always positioning the background with the top and left, we can now position it in reference to the bottom and/or the right of the element.
(April 2012: Not yet well implemented, Opera ok, Webkit no, Firefox no)

Backgrounds level 3

● ● ● ● ● ● ● ●

New values for 'background-repeat'
From the demo:

div:nth-child(1){
  background-repeat:round } 
div:nth-child(2){
  background-repeat:space }

round = whole number of images, rescaled if necessary
space = whole number of images, spread out if necessary

Backgrounds level 3

● ● ● ● ● ● ● ●

Short form

div:nth-child(1){
  background:#c7c7c7 url(../images/postit.png)
    top left/cover no-repeat;
}
   

Backgrounds level 3

● ● ● ● ● ● ● ●

From the demo

div:nth-child(1){
	background-image:
    linear-gradient(top, tomato, gold);
}
div:nth-child(10){
	background-image:
    radial-gradient(red, yellow, green);
}

April 2012: some experimental implementations (prefixes)