Skip to content

[css-backgrounds-4] Added background-layer property #9084

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 12, 2023
Merged

[css-backgrounds-4] Added background-layer property #9084

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6e6bbfd
[css-backgrounds-4] Added `background-layer` shorthand property
SebastianZ Jul 9, 2023
449169c
[css-backgrounds-4] Renamed `background-layer` to `background-tbd` fo…
SebastianZ Sep 14, 2023
2fdf9b0
[css-backgrounds-4] Clarified examples for background layers property
SebastianZ Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions css-backgrounds-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,62 @@ Painting Area: the 'background-clip' property</h3>
</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">
Expand All @@ -196,6 +252,7 @@ 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>

Expand Down