Background is a CSS1 version with new Properties in CSS3. Background can be apply on any HTML Element. CSS1 Background Properties are:

Property	Description
background-color	Specify the background color to be used.
background-image	Specify the background image to be used.
background-position	Specifies the position of the background images.
background-repeat	Specifies how to repeat the background images.
background-attachment	Specifies whether the background images are fixed or scrolls.

CSS3 Multiple Backgrounds

CSS3 allows you to add multiple background images for an HTML element, using background-image property.
Example: Multiple Backgrounds

Or you can write above code in one line.

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 

CSS3 new background properties are:

Property	Description
background-size	Specifies the size of the background images. The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
background-origin	Specifies the positioning area of the background images.
background-clip	Specifies the painting area of the background images.

CSS3 Background Size

The CSS3 background-size property allows you to specify the size of background images. Before CSS3, the size of a background image was the actual size of the image. The size can be specified in pixel, percentages, or by using one of the two keywords: contain or cover.

            div {
            background: url(img_flower.jpg);
            background-size: 100px 80px;
            background-repeat: no-repeat;
        }
        

The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area).

background-size: contain;

The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area).

background-size: cover;

Define Sizes of Multiple Background Images

div {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, 
    url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

Full Size Background Image

html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

CSS3 background-origin Property

The CSS3 background-origin property specifies where the background image is positioned. CSS3 background-origin property takes three different values:
1. border-box - the background image starts from the upper left corner of the border
2. padding-box - (default) the background image starts from the upper left corner of the padding edge
3. content-box - the background image starts from the upper left corner of the content.

    div {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: border-box | padding_box | content-box;
    }

CSS3 background-clip Property

The CSS3 background-clip property specifies the painting area of the background. The property takes three different values:
1. border-box (default), the background is clipped to the border box.
2. padding-box : The background is clipped to the padding box.
3. content-box : The background is clipped to the content box.

    div {
    border:10px dotted black;
    padding:35px;
    background:yellow;
    background-clip:content-box;
}

background-clip: border-box|padding-box|content-box;