CSS3 consists of some new background properties that provide for better control over the background element. In this article, we’ll go over the following CSS3 background properties:
- background-clip
- background-origin
- background-size
- background-image

Please note that the background property is supported by all important versions of prominent web browsers like Internet Explorer, Google Chrome, Safari, Mozilla Firefox, Opera and more.

Adding multiple backgrounds in CSS3 (using background-image property)
CSS3 enables addition of multiple background images to an element by using the background-image property. All these background images need to be separated by commas, and each is stacked on top of the other, with the first image appearing closest to the viewer. The specification of multiple background images can be done either through the background shorthand property or via the individual background properties.

Altering the background size in CSS3 (using background-size property)
The background-size property of CSS3 enables the user to specify the exact size of the background images. Before CSS3 came into being, the background images’ size used to be same as the actual size of the images. CSS3 allows the background images to be reused in different contexts.
The image size can be specified as percentages, lengths or via either of these two keywords: cover or contain.
By using the contain keyword, you can scale the background image to as large size as possible, ensuring that its height and width fit properly into the content area. Please note, the background image may not completely cover the background, leaving some areas empty. This depends entirely on the positioning area of the background and the background image’s proportions.
On the other hand, the usage of cover keyword scales the background image in a manner that it completely covers the content area, ensuring that its height and width are either equal to the content area or exceed it. As a result, the background image may possibly go beyond the background positioning area, making some of it invisible.

Defining the sizes of several background images

The usage of background-size property also provides for multiple value setting for the background size (in a list separated with commas) while you work with multiple backgrounds.

Defining a full size background image

A background image can also be set in a way that it always covers the entire area of the browser window. You first fill up the entire browser page using the provided image (leaving no white spaces). Then, scale the image as needed, followed by centering of the image on the page in a manner that it leads to no scrollbars.

Using the background-origin property of CSS3

Using this property you can specify the exact position of the background image. Its syntax can take three values as follows:
- content-box: It starts the background image from the content’s upper left corner.
- padding-box: This is the default value which starts the background image from the padding edge’s upper left corner.
- border-box: It starts the background image from the border’s upper left corner.

Using the background-clip property of CSS3

The usage of background-clip property enables the specification of the background’s painting area. It can have three distinct values:
- content-box: By using this the background gets painted inside the content box.
- padding-box: By using this the background gets painted on the outside edge of padding.
- border-box: It is the default value and by using this the pattern gets painted on the outside edge of border.