Overview.bs

<pre class='metadata'>
Title: CSS Backgrounds Module Level 4
Shortname: css-backgrounds
Level: 4
Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-backgrounds-4/
Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/, w3cid 52258
Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 64937
Abstract: This module contains the features of CSS relating to the backgrounds of boxes on the page.
Ignored Terms: total width
Warning: Not Ready
</pre>

<pre class="link-defaults">
spec:css-text-4; type:value; text:collapse
spec:css-shapes-2; type:function; text:path()
spec:css-borders-4; type:property; text:border-color
</pre>

<link rel="stylesheet" href="style.css" />

<h2 id="intro">
Introduction</h2>

	<p class="issue">
		This module is currently maintained as a diff against
		the parts related to backgrounds of
		CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
		We will fold in the text once it's all formatted up and in CR again,
		as this will reduce the effort of keeping them in sync
		(source diffs will be accurate in reflecting the differences).

<h2 id="backgrounds">
Backgrounds</h2>

<h3 id="the-background-position">
Background Positioning: the 'background-position' shorthand property</h3>

	<pre class="propdef shorthand">
		Name: background-position
		Value: <<bg-position>>#
	</pre>

	See [[CSS3BG]] for definition.

	<p>Where
	<pre class=prod><dfn>&lt;bg-position&gt;</dfn> = [
	  [ left | center | right | top | bottom | start | end | <<length-percentage>> ]
	|
	  [ left | center | right | x-start | x-end | <<length-percentage>> ]
	  [ top | center | bottom | y-start | y-end | <<length-percentage>> ]
	|
	  [ center | [ left | right | x-start | x-end ] <<length-percentage>>? ] &amp;&amp;
	  [ center | [ top | bottom | y-start | y-end ] <<length-percentage>>? ]
	|
	  [ center | [ start | end ] <<length-percentage>>? ]
	  [ center | [ start | end ] <<length-percentage>>? ]	]</pre>

	Values have the following meanings:
	<dl>
		<dt>One value
		<dd>
			If only one value is given,
			and that value is ''background-position/start'' or ''background-position/end'',
			then the keyword is duplicated;
			otherwise the second keyword defaults to ''background-position/center''.
			The resulting value is treated as a two-component value.

		<dt>More than one value
		<dd>
			If the value contains a ''background-position/start'' or ''background-position/end'' keyword,
			then the shorthand sets
			'background-position-inline' and 'background-position-block' to the specified values.
			Otherwise
			the shorthand sets
			'background-position-x' and 'background-position-y' to the specified values.

			Issue: Specify the value assignment in more detail. Should expand just like Level 3.
	</dl>

	Issue: Specify what happens to set of properties that are not set. Maybe they're just not set?

<h4 id="background-position-longhands">
Background Positioning Longhands: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties</h4>

	Issue: This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.

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

	This property specifies the background position's horizontal component.
	An omitted origin keyword is assumed to be ''background-position-x/left''.

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

	This property specifies the background position's vertical component.
	An omitted origin keyword is assumed to be ''background-position-y/top''.

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

	This property specifies the background position's inline-axis component.
	An omitted origin keyword is assumed to be ''background-position-inline/start''.

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

	This property specifies the background position's block-axis component.
	An omitted origin keyword is assumed to be ''background-position-block/start''.

<h3 id='background-clip'>
Painting Area: the 'background-clip' property</h3>

	<pre class="propdef">
		Name: background-clip
		Value: <<bg-clip>>#
		Initial: border-box
		Inherited: no
		Animation type: repeatable list
	</pre>

	Determines the <dfn export>background painting area</dfn>,
	which determines the area within which the background is painted.
	The syntax of the property is given with

	<pre class=prod>
	<dfn>&lt;bg-clip></dfn> = <<visual-box>> | border | text
	</pre>

	Issue: Or should this be defining the <css>-webkit-background-clip</css> property,
	saying that all the values are identical,
	with this additional ''text'' value?

	<dl dfn-type=value dfn-for="background-clip, <bg-clip>">
		<dt><dfn><<visual-box>></dfn>
		<dd>
			The background is painted within (clipped to)
			the specified box of the element.

		<dt><dfn>text</dfn>
		<dd>
			The background is painted within (clipped to)
			the intersection of the border box
			and the geometry of the text in the element and its in-flow and floated descendants.

		<dt><dfn>border</dfn></dt>
		<dd>
			The background is clipped to the area painted by the border, taking 'border-width' and 'border-style' into account but ignoring any transparency introduced by 'border-color'.
		</dd>
	</dl>

<h3 id='background-layers'>
Background Image Layers: the 'background-tbd' shorthand property</h3>

	<pre class="propdef">
		Name: background-tbd
		Value: <<bg-layer>>#
		Initial: see individual properties
		Applies to: all elements
		Inherited: no
		Percentages: see individual properties
		Computed value: see individual properties
		Animation type: see individual properties
	</pre>

	<p>The 'background-tbd' property is a [=shorthand property=]
	that sets all the same properties as the 'background' shorthand
	except for 'background-color',
	allowing authors to easily declare and position background images
	while letting 'background-color' cascade through independently.

	Issue:
		The name of this property is discussed in
		<a href="https://github.com/w3c/csswg-drafts/issues/9083">issue 9083</a>.

	<div class="example" id="background-layer-example">
		This example sets two background layers later in the cascade.
		By using 'background-tbd', the previously set 'background-color'
		won't be overridden.

		<pre class="lang-css">
		p {
			background-color: green;
		}

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

	<div class="invalid example" id="invalid-background-layer-example">
		This example tries to set the background color in addition to
		the background image. But for that to work,
		'background' needs to be used instead of 'background-tbd'.
		So the 'background-tbd' declaration will be dropped.

		<pre class="lang-css">
		p {
			background: url(pass.png) green;   /* valid */
			background-tbd: url(fail.png) red; /* invalid */
		}
		</pre>
	</div>

Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?

<h2 id="changes">
Changes</h2>

<h3 id="level-changes">
Additions since [[CSS3BG]]</h3>

	* turned 'background-position' into a shorthand and added physical and logical longhands
	* added logical keywords to <<bg-position>>
	* added 'background-clip'
	* added 'background-tbd'

<h2 id="acknowledgments">
Acknowledgments</h2>

	<p>In addition to the many contributors to the [[CSS1]], [[CSS21]],
	and [[CSS3BG]] predecessors to this module,
	the editors would like to thank
	Tab Atkins,
	and Håkon Wium Lie
	for their suggestions and feedback specifically for this Level 4.

<h2 class=no-num id=privacy>Privacy Considerations</h2>

No new privacy considerations have been reported on this specification.

<h2 class=no-num id=security>Security Considerations</h2>

No new security considerations have been reported on this specification.