8000 background layering is based on background-image only, http://lists.w… · w3c/csswg-drafts@91563a9 · GitHub
Skip to content

Commit 91563a9

Browse files
fantasaifantasai
committed
background layering is based on background-image only, http://lists.w3.org/Archives/Public/www-style/2009Jan/0081.html , remove stray fallback color sentence and drop editor's comment from previous publication
1 parent 9282688 commit 91563a9

2 files changed

Lines changed: 49 additions & 172 deletions

File tree

‎css3-background/Overview.html‎

Lines changed: 26 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -356,101 +356,48 @@ <h2 id=background><span class=secno>3. </span>Background properties</h2>
356356
<h3 id=layering><span class=secno>3.1 </span>Layering multiple background
357357
images</h3>
358358

359-
<p>The background of a box can have multiple layers in CSS3. The properties
359+
<p>The background of a box can have multiple layers in CSS3. The number of
360+
layers is determined by the number of comma-separated values in the
360361
&lsquo;<code class=property><a
361-
href="#background-image">background-image</a></code>&rsquo;, &lsquo;<code
362-
class=property><a
363-
href="#background-origin">background-origin</a></code>&rsquo;,
364-
&lsquo;<code class=property><a
365-
href="#background-clip">background-clip</a></code>&rsquo;, &lsquo;<code
366-
class=property><a
367-
href="#background-repeat">background-repeat</a></code>&rsquo;,
368-
&lsquo;<code class=property><a
369-
href="#background-size">background-size</a></code>&rsquo;, and
370-
&lsquo;<code class=property><a
371-
href="#background-position">background-position</a></code>&rsquo; may have
372-
multiple comma-separated values. If the values are specified as follows:
362+
href="#background-image">background-image</a></code>&rsquo; property. Note
363+
that a value of &lsquo;<code class=property>none</code>&rsquo; still
364+
creates a layer.
373365

374-
<blockquote>
375-
<p>background-image: <var>w</var><sub>1</sub>, <var>w</var><sub>2</sub>,
376-
<var>w</var><sub>3</sub>,&hellip;,
377-
<var>w</var><sub><var>M</var></sub><br>
378-
background-repeat: <var>x</var><sub>1</sub>, <var>x</var><sub>2</sub>,
379-
<var>x</var><sub>3</sub>,&hellip;,
380-
<var>x</var><sub><var>R</var></sub><br>
381-
background-size: <var>y</var><sub>1</sub>, <var>y</var><sub>2</sub>,
382-
<var>y</var><sub>3</sub>,&hellip;,
383-
<var>y</var><sub><var>S</var></sub><br>
384-
background-position: <var>s</var><sub>1</sub>, <var>s</var><sub>2</sub>,
385-
<var>s</var><sub>3</sub>,&hellip;, <var>s</var><sub><var>P</var></sub>
386-
</blockquote>
387-
388-
<p>then the number of layers is <var>N</var> = max(<var>M</var>,
389-
<var>R</var>, <var>S</var>, <var>P</var>)
390-
391-
<p>Each of the properties is interpreted as if it had <var>N</var> values,
392-
by repeating the specified values like this:
393-
394-
<blockquote>
395-
<p>background-image:
396-
<var>w</var><sub>1</sub>,&hellip;<var>w</var><sub><var>M</var></sub>,
397-
<var>w</var><sub>1</sub>,&hellip;<var>w</var><sub><var>M</var></sub>,
398-
<var>w</var><sub>1</sub>,&hellip; /* <var>N</var> values */<br>
399-
background-repeat:
400-
<var>x</var><sub>1</sub>,&hellip;<var>x</var><sub><var>R</var></sub>,
401-
<var>x</var><sub>1</sub>,&hellip;<var>x</var><sub><var>R</var></sub>,
402-
<var>x</var><sub>1</sub>,&hellip; /* <var>N</var> values */<br>
403-
background-size:
404-
<var>y</var><sub>1</sub>,&hellip;<var>y</var><sub><var>S</var></sub>,
405-
<var>y</var><sub>1</sub>,&hellip;<var>y</var><sub><var>S</var></sub>,
406-
<var>y</var><sub>1</sub>,&hellip; /* <var>N</var> values */<br>
407-
background-position:
408-
<var>s</var><sub>1</sub>,&hellip;<var>r</var><sub><var>P</var></sub>,
409-
<var>s</var><sub>1</sub>,&hellip;<var>r</var><sub><var>P</var></sub>,
410-
<var>s</var><sub>1</sub>,&hellip; /* <var>N</var> values */
411-
</blockquote>
366+
<p>Each of the images is repeated, sized, and positioned according to the
367+
corresponding value in the other background properties. The lists are
368+
matched up from the first value: excess values at the end are not used. If
369+
a property doesn't have enough comma-separated values to match the number
370+
of layers, the UA must calculate its used value by repeating the list of
371+
values until there are enough.
412372

413373
<div class=example>
414-
<p>This set of declarations:
374+
<p>For example, this set of declarations:
415375

416376
<pre>
417377
background-image: url(flower.png), url(ball.png), url(grass.png);
418-
background-position: center center, 20% 80%, top left;
378+
background-position: center center, 20% 80%, top left, bottom right;
419379
background-origin: border-box, content-box;
380+
background-repeat: no-repeat;
420381
</pre>
421382

422-
<p>has exactly the same effect as this set with the origin values repeated
423-
(displayed in bold for clarity):
383+
<p>has exactly the same effect as this set with the extra position dropped
384+
and the missing values for &lsquo;<code class=property><a
385+
href="#background-origin">background-origin</a></code>&rsquo; and
386+
&lsquo;<code class=property><a
387+
href="#background-repeat">background-repeat</a></code>&rsquo; filled in
388+
(emphasized for clarity):
424389

425390
<pre>
426391
background-image: url(flower.png), url(ball.png), url(grass1.png);
427392
background-position: center center, 20% 80%, top left;
428-
background-origin: border-box, content-box<b>, border-box</b>;
429-
</pre>
430-
431-
<p>Likewise, this set of declarations:
432-
433-
<pre>
434-
background-image: url(red.png), url(blue.png);
435-
background-repeat: repeat-x, repeat-y, repeat-y;
436-
background-position: 20% 25%, 40% 10%, 50% 15%, 70% 40%, 90% 35%;
437-
</pre>
438-
439-
<p>has the same effect as:
440-
441-
<pre>
442-
background-image: url(red.png), url(blue.png)<b>, url(red.png),</b>
443-
<b>url(blue.png), url(red.png)</b>;
444-
background-repeat: repeat-x, repeat-y, repeat-y<b>, repeat-x, repeat-y</b>;
445-
background-position: 20% 25%, 40% 10%, 50% 15%, 70% 40%, 90% 35%;
393+
background-origin: border-box, content-box<strong>, border-box</strong>;
394+
background-repeat: no-repeat<strong>, no-repeat, no-repeat</strong>;
446395
</pre>
447396
</div>
448397

449-
<p>Each of the images is repeated, sized, and positioned according to the
450-
corresponding value in the other properties. The first image in the list
451-
is the layer closest to the user, the next one is painted behind the
452-
first, and so on. The background color, if present, is painted below all
453-
of the other layers.
398+
<p>The first image in the list is the layer closest to the user, the next
399+
one is painted behind the first, and so on. The background color, if
400+
present, is painted below all of the other layers.
454401

455402
<h3 id=the-background-color><span class=secno>3.2 </span>The &lsquo;<code
456403
class=property><a
@@ -504,9 +451,7 @@ <h3 id=the-background-color><span class=secno>3.2 </span>The &lsquo;<code
504451
instead of the first color in the case the element's specified bottom-most
505452
background image, if any, fails to load or cannot be displayed (e.g.
506453
because it is in an unsupported format or is corrupted in some way). This
507-
color is called the <dfn id=fallback>fallback color.</dfn> If the color
508-
before the slash is missing, it is assumed to be &lsquo;<code
509-
class=css>transparent</code>&rsquo;.
454+
color is called the <dfn id=fallback>fallback color.</dfn>
510455

511456
<div class=example>
512457
<p>Example:
@@ -1041,11 +986,6 @@ <h3 id=the-background-position><span class=secno>3.6 </span>The
1041986
background-position: left 10px top ; /* 10px, 0px */</pre>
1042987
</div>
1043988

1044-
<div class=issue>
1045-
<p>Is this a reasonable syntax for specifying offsets from the bottom
1046-
right corner? What do people think?</p>
1047-
</div>
1048-
1049989
<dl>
1050990
<dt><dfn id=position-percentage>&lt;percentage&gt;</dfn>
1051991

‎css3-background/Overview.src.html‎

Lines changed: 23 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -167,97 +167,40 @@ <h2>Background properties</h2>
167167

168168
<h3 id="layering">Layering multiple background images</h3>
169169

170-
<p>The background of a box can have multiple layers in CSS3. The properties
171-
'background-image',
172-
'background-origin',
173-
'background-clip',
174-
'background-repeat',
175-
'background-size', and
176-
'background-position'
177-
may have multiple comma-separated values. If the values are specified as
178-
follows:
179-
180-
<blockquote>
181-
<p>background-image: <var>w</var><sub>1</sub>,
182-
<var>w</var><sub>2</sub>, <var>w</var><sub>3</sub>,&hellip;,
183-
<var>w</var><sub><var>M</var></sub><br>
184-
185-
background-repeat: <var>x</var><sub>1</sub>, <var>x</var><sub>2</sub>,
186-
<var>x</var><sub>3</sub>,&hellip;,
187-
<var>x</var><sub><var>R</var></sub><br>
188-
189-
background-size: <var>y</var><sub>1</sub>, <var>y</var><sub>2</sub>,
190-
<var>y</var><sub>3</sub>,&hellip;,
191-
<var>y</var><sub><var>S</var></sub><br>
170+
<p>The background of a box can have multiple layers in CSS3. The number
171+
of layers is determined by the number of comma-separated values in the
172+
'background-image' property. Note that a value of 'none' still creates
173+
a layer.
192174

193-
background-position: <var>s</var><sub>1</sub>,
194-
<var>s</var><sub>2</sub>, <var>s</var><sub>3</sub>,&hellip;,
195-
<var>s</var><sub><var>P</var></sub>
196-
</blockquote>
197-
198-
<p>then the number of layers is <var>N</var> = max(<var>M</var>,
199-
<var>R</var>, <var>S</var>, <var>P</var>)
200-
201-
<p>Each of the properties is interpreted as if it had
202-
<var>N</var> values, by repeating the specified values like this:
203-
204-
<blockquote>
205-
<p>background-image:
206-
<var>w</var><sub>1</sub>,&hellip;<var>w</var><sub><var>M</var></sub>,
207-
<var>w</var><sub>1</sub>,&hellip;<var>w</var><sub><var>M</var></sub>,
208-
<var>w</var><sub>1</sub>,&hellip; /* <var>N</var> values */<br>
209-
210-
background-repeat:
211-
<var>x</var><sub>1</sub>,&hellip;<var>x</var><sub><var>R</var></sub>,
212-
<var>x</var><sub>1</sub>,&hellip;<var>x</var><sub><var>R</var></sub>,
213-
<var>x</var><sub>1</sub>,&hellip; /* <var>N</var> values */<br>
214-
215-
background-size:
216-
<var>y</var><sub>1</sub>,&hellip;<var>y</var><sub><var>S</var></sub>,
217-
<var>y</var><sub>1</sub>,&hellip;<var>y</var><sub><var>S</var></sub>,
218-
<var>y</var><sub>1</sub>,&hellip; /* <var>N</var> values */<br>
219-
220-
background-position:
221-
<var>s</var><sub>1</sub>,&hellip;<var>r</var><sub><var>P</var></sub>,
222-
<var>s</var><sub>1</sub>,&hellip;<var>r</var><sub><var>P</var></sub>,
223-
<var>s</var><sub>1</sub>,&hellip; /* <var>N</var> values */
224-
</blockquote>
175+
<p>Each of the images is repeated, sized, and positioned according to
176+
the corresponding value in the other background properties. The lists
177+
are matched up from the first value: excess values at the end are not
178+
used. If a property doesn't have enough comma-separated values to match
179+
the number of layers, the UA must calculate its used value by repeating
180+
the list of values until there are enough.
225181

226-
<div class=example>
227-
<p>This set of declarations:
182+
<div class="example">
183+
<p>For example, this set of declarations:
228184
<pre>
229185
background-image: url(flower.png), url(ball.png), url(grass.png);
230-
background-position: center center, 20% 80%, top left;
186+
background-position: center center, 20% 80%, top left, bottom right;
231187
background-origin: border-box, content-box;
188+
background-repeat: no-repeat;
232189
</pre>
233-
<p>has exactly the same effect as this set with the origin values
234-
repeated (displayed in bold for clarity):
190+
<p>has exactly the same effect as this set with the extra position
191+
dropped and the missing values for 'background-origin' and
192+
'background-repeat' filled in (emphasized for clarity):
235193
<pre>
236194
background-image: url(flower.png), url(ball.png), url(grass1.png);
237195
background-position: center center, 20% 80%, top left;
238-
background-origin: border-box, content-box<b>, border-box</b>;
239-
</pre>
240-
241-
<p>Likewise, this set of declarations:
242-
<pre>
243-
background-image: url(red.png), url(blue.png);
244-
background-repeat: repeat-x, repeat-y, repeat-y;
245-
background-position: 20% 25%, 40% 10%, 50% 15%, 70% 40%, 90% 35%;
246-
</pre>
247-
<p>has the same effect as:
248-
<pre>
249-
background-image: url(red.png), url(blue.png)<b>, url(red.png),</b>
250-
<b>url(blue.png), url(red.png)</b>;
251-
background-repeat: repeat-x, repeat-y, repeat-y<b>, repeat-x, repeat-y</b>;
252-
background-position: 20% 25%, 40% 10%, 50% 15%, 70% 40%, 90% 35%;
196+
background-origin: border-box, content-box<strong>, border-box</strong>;
197+
background-repeat: no-repeat<strong>, no-repeat, no-repeat</strong>;
253198
</pre>
254199
</div>
255200

256-
<p>Each of the images is repeated, sized, and positioned according to
257-
the corresponding value in the other properties. The first image in
258-
the list is the layer closest to the user, the next one is painted
259-
behind the first, and so on. The background color, if present, is
260-
painted below all of the other layers.
201+
<p>The first image in the list is the layer closest to the user,
202+
the next one is painted behind the first, and so on. The background
203+
color, if present, is painted below all of the other layers.
261204

262205
<h3>The 'background-color' property</h3>
263206

@@ -293,8 +236,7 @@ <h3>The 'background-color' property</h3>
293236
is used instead of the first color in the case the element's specified
294237
bottom-most background image, if any, fails to load or cannot be displayed
295238
(e.g. because it is in an unsupported format or is corrupted in some way).
296-
This color is called the <dfn>fallback color.</dfn> If the color before
297-
the slash is missing, it is assumed to be ''transparent''.
239+
This color is called the <dfn>fallback color.</dfn>
298240

299241
<div class="example">
300242
<p>Example:
@@ -711,11 +653,6 @@ <h3>The 'background-position' property</h3>
711653
background-position: left 10px top ; /* 10px, 0px */</pre>
712654
</div>
713655

714-
<div class="issue">
715-
<p>Is this a reasonable syntax for specifying offsets from the bottom
716-
right corner? What do people think?</p>
717-
</div>
718-
719656
<dl>
720657
<dt><dfn id="position-percentage">&lt;percentage&gt;</dfn>
721658

0 commit comments

Comments
 (0)