<> = scroll | fixed | local

fixed

The background is fixed with regard to the viewport. In [=paged media=] where there is no viewport, a ''fixed'' background is fixed with respect to the page box and therefore replicated on every page. Note: There is only one viewport per view. Even if an box is a [=scroll container=], a ''fixed'' background doesn't move with the box.

local

The background is fixed with regard to the box's contents: if the box has a scrolling mechanism, the background scrolls with the box's contents, and the [=background painting area=] and [=background positioning area=] are relative to the [=scrollable overflow area=] of the box rather than to the border framing them. Because the [=scrollable overflow area=] does not include the [=border area=], for [=scroll containers=] the ''background-clip/border-box'' value of 'background-clip' may be treated the same as ''background-clip/padding-box''.

scroll

The background is fixed with regard to the box itself and does not scroll with its contents. (It is effectively attached to the box's border.)

		body {
			background: red url("pendant.gif");
			background-repeat: repeat-y;
			background-attachment: fixed;
		}
		

	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: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties

		Name: background-position-x
		Value: [ center | [ [ left | right | x-start | x-end ]? <>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to width of background positioning area minus width of background image
		Computed value: A list, each item consisting of: an offset given as a computed <> value, plus an origin keyword
		Animation type: repeatable list
	

		Name: background-position-y
		Value: [ center | [ [ top | bottom | y-start | y-end ]? <>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to height of background positioning area minus height of background image
		Computed value: A list, each item consisting of: an offset given as a computed <> value, plus an origin keyword
		Animation type: repeatable list
	

		Name: background-position-inline
		Value: [ center | [ [ start | end ]? <>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to inline-size of background positioning area minus inline-size of background image
		Computed value: A list, each item consisting of: an offset given as a computed <> value, plus an origin keyword
		Animation type: repeatable list
	

		Name: background-position-block
		Value: [ center | [ [ start | end ]? <>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to size of background positioning area minus size of background image
		Computed value: A list, each item consisting of: an offset given as a computed <> value, plus an origin keyword
		Animation type: repeatable list
	

<>

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-clip
		Value: <>#
		Initial: border-box
		Inherited: no
		Animation type: repeatable list
	

	<bg-clip> = <> | [ border-area || text ]
	

	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;
		}
		

		Name: background-tbd
		Value: <>#
		Initial: see individual properties
		Applies to: all elements
		Inherited: no
		Percentages: see individual properties
		Computed value: see individual properties
		Animation type: see individual properties
	

		p {
			background-color: green;
		}

		p {
			background-tbd:
				url(a.png) top left,
				url(b.png) top left no-repeat;
		}
		

		p {
			background: url(pass.png) green;   /* valid */
			background-tbd: url(fail.png) red; /* invalid */
		}
		

	Name: background
	Value: <>#? , <>
	Applies to: all elements
	Inherited: no
	

	<bg-layer> = <> || <> [ / <> ]? || <> || <> || <> || <>
	<final-bg-layer> =  <> || <> [ / <> ]? || <> || <> || <> || <> || <<'background-color'>>

		body { background: red }
		p { background: url("chess.png") 40% / 10em gray
		                round fixed border-box; }
		

		body {
		    background-color: red;
		    background-position: 0% 0%;
		    background-size: auto;
		    background-repeat: repeat;
		    background-clip: border-box;
		    background-origin: padding-box;
		    background-attachment: scroll;
		    background-image: none }
		

		p {
			background-color: gray;
			background-position: 40% 50%;
			background-size: 10em auto;
			background-repeat: round;
			background-clip: border-box;
			background-origin: border-box;
			background-attachment: fixed;
			background-image: url(chess.png);
		}
		

		E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
		

		div {
			background: padding-box url(paper.jpg) white center;
		}

		div {
			background-color: white;
			background-image: url(paper.jpg);
			background-repeat: repeat;
			background-attachment: scroll;
			background-position: center;
			background-clip: padding-box;
			background-origin: padding-box;
			background-size: auto auto;
		}
		

		background: url(a.png) top left no-repeat,
		            url(b.png) center / 100% 100% no-repeat,
		            url(c.png) white;
		

		background-image:      url(a.png),  url(b.png),          url(c.png);
		background-position:   top left,    center,              top left;
		background-repeat:     no-repeat,   no-repeat,           repeat;
		background-clip:       border-box,  border-box,          border-box;
		background-origin:     padding-box, padding-box,         padding-box;
		background-size:       auto auto,   100% 100%,           auto auto;
		background-attachment: scroll,      scroll,              scroll;
		background-color:      white;
		

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

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

		<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
		  >
		<html>
		  <head>
		    <title>Setting the canvas background</title>
		    <style type="text/css">
		       body { background: url("http://example.org/marble.png") }
		    </style>
		  </head>
		  <body>
		    <p>My background is marble.</p>
		  </body>
		</html>