# 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 the`background-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:

- multiple background-image: Safari 3+, Chrome 1+, Konqueror 3.5.7
- background-clip and background-origin: Safari 3.0+ and Firefox 1.0+ with experimental syntax.
  IE up to version 7 defaults to background-origin:border. IE 8 default behaviour is background-origin:padding
- background-size: Opera 9.5, Safari 3 and Konqueror. Firefox nightly. All with experimental syntax
- background-attachment: not yet supported in public releases of Firefox and Safari

### 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/