Multiple backgrounds

From the demo:

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

(Link to specification)

Contain & cover

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)

Background-origin, background-clip

From the demo :

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

Background-attachment

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)

New 'background-position'

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, Firefox ok, Webkit no)

New 'background-repeat'

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

'Background' shorthand

Short form

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

Backgrounds and gradients

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)