CSS3 Background properties background-image, background-sizebackground-origin, background-clip, background-attachment

Multiple background images

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the background-image or shortcut background properties.

div {
 	  background: url(example.jpg) top left no-repeat,
      url(example2.jpg) bottom left no-repeat,
      url(example3.jpg) center center repeat-y;
	    }

Get rid of extra divs and wrappers used just to add background "hangers"

Multiple backgrounds to create "sliding doors" navigation tabs without extra markup

background-image: url(images/left.png), url(images/right.png), url(images/main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;

or the shortcut method

background:url(images/left.png)left top no-repeat, 
url(images/right.png) right top no-repeat, 
url(images/main.png) left top repeat-x;
This is the content we want framed with sliding doors
And another block

Background-size

background-size Specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.

-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
-khtml-background-size: 50% 50%;
-o-background-size: 50% 50%;
background-size: 50% 50%;
This div has background-size: 100% 100%. The background image should be the image actual size 180px by 214px.
This div has background-size: 50% 50%. The background image should be half size, in the left upper corner of this div.

background-clip and background-origin

The background-clip property is used to determine whether the background image extends into the border or not. There are two options, the default border-box and padding-box. When border-box is used, the background image will extend into the border and will therefore show up behind the border. The other option is padding-box which means the background image will stop at the edge of the padding before the border. This helps display your image as desired expecially with thick borders or dotted or dashed borders.

background-clip: border-box;
background-clip: padding-box;
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-origin: padding-box; background-clip: padding-box;
With thebackground-origin property specifies how the position of a background is calculated. The background-origin property can be set to start positioning from either the border, padding, or content (element box inside padding). This allows for greater flexibility in terms of placing a background image.

padding-box
The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)
border-box
The position is relative to the border box.
content-box
The position is relative to the content box.

background-attachment

The background-attachment property determines if a background image is fixed or scrolls with the rest of the page. It happens when we define how a background image is attached to a viewport. Background images can be fixed to a viewport or can scroll along with the element or with its contents via local.

Browser support:

Tutorials:

http://designshack.co.uk/tutorials/introduction-to-css3-part-6-backgrounds

http://whereswalden.com/files/mozilla/background-size/more-examples.html

http://people.opera.com/pepelsbey/experiments/bga/

Examples:

http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-origin

http://people.opera.com/danield/examples/bg-clip.html

http://www.askthecssguy.com/examples/fixedBackgroundImages/example03.html

http://people.opera.com/pepelsbey/experiments/bga/