+	body {
+		/* For all UAs: */
+		background: white url(paper.png) scroll;
+		/* For UAs that do fixed backgrounds: */
+		background: white url(ledger.png) fixed;
+	}
+	h1 {
+		/* For all UAs: */
+		background: silver;
+		/* For UAs that do fixed backgrounds: */
+		background: url(stripe.png) fixed, white url(ledger.png) fixed;
+	}
+	

-Background Positioning Longhands: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties

+Background Positioning: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties

+

<> +

+ A percentage for the horizontal offset is relative to + (width of [=background positioning area=] - width of [=background image=]). + A percentage for the vertical offset is relative to + (height of [=background positioning area=] - height of [=background image=]), + where the size of the image is the size given by 'background-size'. + +

+ For example, with a value pair of ''0% 0%'', + the upper left corner of the image is aligned with + the upper left corner of, usually, the box's [=padding edge=]. + A value pair of ''100% 100%'' places + the lower right corner of the image + in the lower right corner of the area. + With a value pair of ''75% 50%'', + the point 75% across and 50% down the image + is to be placed at the point 75% across and 50% down the area. + +

+ + +

+

+ +

<> +

+ A length value gives a fixed length as the offset. + For example, with a value pair of ''2cm 1cm'', + the upper left corner of the image is placed + 2cm to the right and 1cm below + the upper left corner of the [=background positioning area=]. + +

''top'' +

+ Computes to ''0%'' for the vertical position if one or two values are given, + otherwise specifies the top edge as the origin for the next offset. + +

''right'' +

+ Computes to ''100%'' for the horizontal position if one or two values are given, + otherwise specifies the right edge as the origin for the next offset. + +

''bottom'' +

+ Computes to ''100%'' for the vertical position if one or two values are given, + otherwise specifies the bottom edge as the origin for the next offset. + +

''left'' +

+ Computes to ''0%'' for the horizontal position if one or two values are given, + otherwise specifies the left edge as the origin for the next offset. + +

''center'' +

+ Computes to ''50%'' (''left 50%'') for the horizontal position + if the horizontal position is not otherwise specified, + or ''50%'' (''top 50%'') for the vertical position if it is. +

+		body { background: url("banner.jpeg") right top }    /* 100%   0% */
+		body { background: url("banner.jpeg") top center }   /*  50%   0% */
+		body { background: url("banner.jpeg") center }       /*  50%  50% */
+		body { background: url("banner.jpeg") bottom }       /*  50% 100% */
+		

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

background-position: right 3em bottom 10px

+Background Positioning Shorthand: the 'background-position' shorthand property

+	Name: background-position
+	Value: <>#
+	Initial: 0% 0%
+	Applies to: all elements
+	Inherited: no
+	Percentages: refer to size of background positioning area
+	    minus size of background image; see text
+	Computed value: a list,
+	    each item a pair of offsets (horizontal and vertical) from the top left origin,
+	    each offset given as a computed <> value
+	Animation type: repeatable list
+	

+		background-position: left 10px top 15px;   /* 10px, 15px */
+		background-position: left      top     ;   /*  0px,  0px */
+		background-position:      10px     15px;   /* 10px, 15px */
+		background-position: left          15px;   /*  0px, 15px */
+		background-position:      10px top     ;   /* 10px,  0px */
+		background-position: left      top 15px;   /*  0px, 15px */
+		background-position: left 10px top     ;   /* 10px,  0px */
+		

+		<> =  <> | <>
+		<> = [
+		  [ left | center | right ] && [ [ top | bottom ] <> ]
+		|
+		  [ [ left | right ] <> ] && [ top | center | bottom ]
+		]
+	

+	Name: background-origin
+	Value: <>#
+	Initial: padding-box
+	Applies to: all elements
+	Inherited: no
+	Percentages: N/A
+	Computed value: list, each item a keyword as specified
+	Animation type: repeatable list
+	

+	Name: background-size
+	Value: <>#
+	Initial: auto
+	Applies to: all elements
+	Inherited: no
+	Percentages: see text
+	Computed value: list,
+		each item a pair of sizes (one per axis)
+		each represented as either a keyword or a computed <> value
+	Animation type: repeatable list
+	

<> = [ <> | auto ]{1,2} | cover | contain

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

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

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

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

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

+		div {
+			background-image: url(image1.png);
+			background-repeat: repeat;         /* default */
+			background-size: auto;             /* default */
+		}
+		

+		div {
+			background-image: url(image2.png);
+			background-repeat: repeat;         /* default */
+			background-size: 3em;              /* = '3em auto' */
+		}
+		

+		div {
+			background-image: url(image3.png);
+			background-repeat: round repeat;
+			background-size: 3em auto;
+		}
+		

+		div {
+			background-image: url(image4.png);
+			background-repeat: repeat round;
+			background-size: 3em auto;
+		}
+		

+		div {
+			background-image: url(image5.png);
+			background-repeat: round;
+			background-size: auto 4em;
+		}
+