Skip to content

Commit 46e0719

Browse files
committed
[css-backgrounds-4] Incorporate logical keywords to background-position w3c#9690
1 parent 503c6ce commit 46e0719

File tree

1 file changed

+38
-39
lines changed

1 file changed

+38
-39
lines changed

css-backgrounds-4/Overview.bs

+38-39
Original file line numberDiff line numberDiff line change
@@ -205,49 +205,48 @@ Tiling Images Shorthand: the 'background-repeat' property</h3>
205205
<h3 id="the-background-position">
206206
Background Positioning: the 'background-position' shorthand property</h3>
207207

208-
<pre class="propdef shorthand">
209-
Name: background-position
210-
Value: <<bg-position>>#
208+
<pre class="propdef">
209+
Name: background-position
210+
Value: <<bg-position>>#
211+
Initial: 0% 0%
212+
Applies to: all elements
213+
Inherited: no
214+
Percentages: refer to size of <span class=index>background positioning area</span>
215+
<em>minus</em> size of background image; see text
216+
Computed value: a list,
217+
each item a pair of offsets (horizontal and vertical) from the top left origin,
218+
each offset given as a computed <<length-percentage>> value
219+
Animation type: repeatable list
211220
</pre>
212221

213-
See [[CSS3BG]] for definition.
214-
215-
<p>Where
216-
<pre class=prod><dfn>&lt;bg-position&gt;</dfn> = [
217-
[ left | center | right | top | bottom | start | end | <<length-percentage>> ]
218-
|
219-
[ left | center | right | x-start | x-end | <<length-percentage>> ]
220-
[ top | center | bottom | y-start | y-end | <<length-percentage>> ]
221-
|
222-
[ center | [ left | right | x-start | x-end ] <<length-percentage>>? ] &amp;&amp;
223-
[ center | [ top | bottom | y-start | y-end ] <<length-percentage>>? ]
224-
|
225-
[ center | [ start | end ] <<length-percentage>>? ]
226-
[ center | [ start | end ] <<length-percentage>>? ] ]</pre>
227-
228-
Values have the following meanings:
229-
<dl>
230-
<dt>One value
231-
<dd>
232-
If only one value is given,
233-
and that value is ''background-position/start'' or ''background-position/end'',
234-
then the keyword is duplicated;
235-
otherwise the second keyword defaults to ''background-position/center''.
236-
The resulting value is treated as a two-component value.
222+
If [=background images=] have been specified,
223+
this property specifies their initial position
224+
(after any <a href="#background-size">resizing</a>)
225+
within their corresponding [=background positioning area=].
237226

238-
<dt>More than one value
239-
<dd>
240-
If the value contains a ''background-position/start'' or ''background-position/end'' keyword,
241-
then the shorthand sets
242-
'background-position-inline' and 'background-position-block' to the specified values.
243-
Otherwise
244-
the shorthand sets
245-
'background-position-x' and 'background-position-y' to the specified values.
246-
247-
Issue: Specify the value assignment in more detail. Should expand just like Level 3.
248-
</dl>
227+
This property is a [=shorthand property=] that sets
228+
'background-position-x', 'background-position-y', 'background-position-block', and 'background-position-inine'
229+
in a single declaration.
230+
231+
Its value is given as a comma-separated list
232+
of <dfn><<bg-position>></dfn> values, which are interpreted as <<position>> values
233+
with the resized [=background image=] as the [=alignment subject=]
234+
and the [=background positioning area=] as the [=alignment container=].
235+
236+
<pre class=prod>
237+
<<bg-position>> = <<position>> | <<position-three>>
238+
<position-three> = [
239+
[ left | center | right ] && [ [ top | bottom ] <<length-percentage>> ]
240+
|
241+
[ [ left | right ] <<length-percentage>> ] && [ top | center | bottom ]
242+
]
243+
</pre>
244+
245+
The omitted <<length-percentage>> in the 'background-position'-specific
246+
<<position-three>> syntax variant
247+
defaults to ''0%''.
249248

250-
Issue: Specify what happens to set of properties that are not set. Maybe they're just not set?
249+
Issue(9690): Specify how the [=longhand properties=] are set.
251250

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

0 commit comments

Comments
 (0)