@@ -185,6 +185,62 @@ Painting Area: the 'background-clip' property</h3>
185
185
</dd>
186
186
</dl>
187
187
188
+ <h3 id='background-layers'>
189
+ Background Image Layers: the 'background-tbd' shorthand property</h3>
190
+
191
+ <pre class="propdef">
192
+ Name : background-tbd
193
+ Value : <<bg-layer>>#
194
+ Initial : see individual properties
195
+ Applies to : all elements
196
+ Inherited : no
197
+ Percentages : see individual properties
198
+ Computed value : see individual properties
199
+ Animation type : see individual properties
200
+ </pre>
201
+
202
+ <p> The 'background-tbd' property is a [=shorthand property=]
203
+ that sets all the same properties as the 'background' shorthand
204
+ except for 'background-color' ,
205
+ allowing authors to easily declare and position background images
206
+ while letting 'background-color' cascade through independently.
207
+
208
+ Issue:
209
+ The name of this property is discussed in
210
+ <a href="https://github.com/w3c/csswg-drafts/issues/9083">issue 9083</a> .
211
+
212
+ <div class="example" id="background-layer-example">
213
+ This example sets two background layers later in the cascade.
214
+ By using 'background-tbd' , the previously set 'background-color'
215
+ won't be overridden.
216
+
217
+ <pre class="lang-css">
218
+ p {
219
+ background-color: green;
220
+ }
221
+
222
+ p {
223
+ background-tbd:
224
+ url(a.png) top left,
225
+ url(b.png) top left no-repeat;
226
+ }
227
+ </pre>
228
+ </div>
229
+
230
+ <div class="invalid example" id="invalid-background-layer-example">
231
+ This example tries to set the background color in addition to
232
+ the background image. But for that to work,
233
+ 'background' needs to be used instead of 'background-tbd' .
234
+ So the 'background-tbd' declaration will be dropped.
235
+
236
+ <pre class="lang-css">
237
+ p {
238
+ background: url(pass.png) green; /* valid */
239
+ background-tbd: url(fail.png) red; /* invalid */
240
+ }
241
+ </pre>
242
+ </div>
243
+
188
244
Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?
189
245
190
246
<h2 id="changes">
@@ -196,6 +252,7 @@ Additions since [[CSS3BG]]</h3>
196
252
* turned 'background-position' into a shorthand and added physical and logical longhands
197
253
* added logical keywords to <<bg-position>>
198
254
* added 'background-clip'
255
+ * added 'background-tbd'
199
256
200
257
<h2 id="acknowledgments">Acknowledgments</h2>
201
258
0 commit comments