background

http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position

body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}

In the example above, the (single) image is placed in the lower-right corner of the viewport.

Here are some examples. The first example stretches the background image independently in both directions to completely cover the content area:

div {
background-image: url(plasma.png);
background-size: 100%;
background-origin: content}

The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:

p {
background-image: url(tubes.png);
background-size: 50% auto;
background-origin: border}

This example forces the background image to be 15 by 15 pixels:

para {
background-size: 15px;
background-image: url(tile.png)}

This example uses the image's intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.

body {
background-size: auto;
background-image: url(flower.png)}

The following example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded.

p {
background-image: url(chain.png);
background-repeat: repeat-y;
background-size: 20% 30% round; }

Layering multiple background images

This set of declarations:

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border, content;

has exactly the same effect as this set with the origin values repeated (bolded for clarity):

background-image: url(flower.png), url(ball.png), url(grass1.png);
background-position: center center, 20% 80%, top left;
background-origin: border, content, border;

Likewise, this set of declarations:

background-image: url(red.png), url(blue.png);
background-repeat: repeat-x, repeat-y, repeat-y;
background-position: 20% 25%, 40% 10%, 50% 15%, 70% 40%, 90% 35%;

has the same effect as:

background-image: url(red.png), url(blue.png), url(red.png),
url(blue.png), url(red.png);
background-repeat: repeat-x, repeat-y, repeat-y, repeat-x, repeat-y;
background-position: 20% 25%, 40% 10%, 50% 15%, 70% 40%, 90% 35%;