You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
[css-backgrounds-4] Decide on name for shorthand covering everything background-* except background-color #9083
What about background-overlay? That addresses both of the concerns I raised:
It more clearly refers to the part of the background overlaying the color. (The background color is itself, functionally, a layer of the background so background-layer is confusing in this respect.)
It can be interpreted in a collective sense, so it doesn't feel odd that it's not plural.
I think it's worth noting that we have a similar pattern of properties for fill, and might want to use the same name there: https://drafts.fxtf.org/fill-stroke-3/ (So we should pick a name that works for both.)
I still slightly prefer the initially suggested background-layer over the others. Though I am ok with background-overlay.
I am ruling out some for myself here, which I think don't fit well.
background-pattern While "pattern" indicates that the solid color is excluded, it somewhat sounds like it allows creating simple patterns and not to the images.
background-screen "screen" refers to the monitor in virtually all contexts, not to a layer.
background-cover "cover" rather has a meaning of a single thing, like a book cover, not of multiple layers.
background-slice We already have border-image-slice which refers to slicing an image. So "slice" here may rather confuse authors.
background-image-stack This conveys the idea of different image layers, though it looks like a longhand of background-image while it actually is a shorthand for it and the other background-* properties.
background-media "media" sounds like it covers images, videos and other types of media.
background-image-list Same reason as with background-image-stack.
background-image-layer Same reason as with background-image-stack.
To make progress on this, let's get some straw poll for the different suggestions. As there are many, I'll split them up into several comments. Please add your name besides the entry your prefer or add your vote to the comment. (I've added the names of members who expressed their opinion on one of the proposals in #8726.)
Note that I explicitly left out background-slice and background-media, because I think they miss the idea behind that property. If somebody thinks differently, please leave a comment!
We went with color-layers() in #8431 (comment) so I think we should definitely not go with the singular background-layer here. :)
(I think background-layers doesn't convey as well as background-overlay that it doesn't include the background-color layer, so I'm not totally convinced. But at least it doesn't have the singularity weirdness of background-layer.)
We went with color-layers() in #8431 (comment) so I think we should definitely not go with the singular background-layer here. :)
I want to point out that all list-valued properties so far have singular names, e.g. transition, animation, box-shadow, and so do all background-* properties. So, even when it's clearer using the plural version here, it breaks consistency. That said, I don't have a strong opinion on this.
What I do have a strong opinion about is the lack of votings so far. It would be great if we got some more opinions on this, so we can resolve on a name.
Also, @Loirooriol seems to suggest to revert the resolution to add the property in the first place in #8726 (comment). So, if we decide to remove the property in favor of covering the outlined use case with the newly introduced revert-rule keyword, then the discussion about its name is moot.
Would it be back compat thought? Existing content would break if there were existing background-* properties followed by background-image with only a source that was interpreted as a shorthand. Is that what you mean by "if we can get it implemented"?
There's some CSSOM compat concern around shorthanding properties in general: #8398. I really think we should try and solve it though, so we don't have to force ourselves to a subpar developer experience (not just in this situation, but in others too).
I doubt there are sites using invalid syntax atm that would become valid with my suggestion though.
To be precise, I said "agree on a good name". To be honest, I don't like any of the suggestions I have seen so far, other than Tim's, but that one doesn't seem web compatible.
The attempt for a poll above didn't get much traction, so it seems people aren't very enthusiastic either about the proposed names.
A suboptimal name can be acceptable for an important functionality that can't be achieved in other ways, but here the usecase is covered by revert-rule, so I think the bar for a good name should be higher.
Then my preference is to not add the shorthand at this point.
I won't be at the F2F. So if you do a poll at the F2F, it should consider the results in #9083 (comment) and #9083 (comment) plus @Loirooriol's point to drop the property again.
FWIW, my vote still goes to background-layer, even though it is already covered by revert-rule, as pointed out by Oriol. And I could also imagine this use case to be covered by additive CSS in the future.
Though my opinion is relatively weak on this.
The CSS Working Group just discussed [css-backgrounds-4] Decide on name for shorthand covering everything `background-*` except `background-color` , and agreed to the following:
RESOLVED: close this issue, no change
RESOLVED: No change for now, use `background` shorthand + `background-color: revert-rule`
The full IRC log of that discussion
<dholbert> astearns: Tab suggested having a poll on this
<dholbert> oriol: my idea is, out of the names proposed in the issue, I'm not liking any of them
<dholbert> ...I liked Tim's suggestion, but it's likely not web-compatible
<dholbert> oriol: there were attempts at a poll in the issue with github-reactions, but they didn't get much traction
<dholbert> oriol: getting back to use-case that we're trying to cover -- people want to set all props related to background images without affecting color
<dholbert> oriol: we have a new tool, "preferred rule"
<dholbert> s/preferred/revert/
<dholbert> oriol: you can set the background shorthand to all the values related to background-images, and this will set background-color, and then you can set background-color to revert-rule
<fantasai> `background: stuff; background-color: revert-rule`
<dholbert> ...and that will undo the effects of the shorthand
<lea> +1
<dholbert> oriol: given that we have a tool, and none of the proposals on the issue seem appealing, I'd prefer to not add this new shorthand
<lea> q?
<lea> q+
<dholbert> TabAtkins: I think we can wait, yeah
<dholbert> lea: I agree with TabAtkins and sebastian. Benefit seems marginal, revert-rule tool seems fine
<bramus> +1
<dholbert> astearns: proposed resolution is to close this issue no change for now
<dholbert> RESOLVED: close this issue, no change
<lea> s/revert-rule tool/revert-rule workaround/
<fantasai> RESOLVED: No change for now, use `background` shorthand + `background-color: revert-rule`
Activity
fantasai commentedon Aug 3, 2023
Copying from #8726 (comment)
What about
background-overlay? That addresses both of the concerns I raised:background-layeris confusing in this respect.)Copying from #8726 (comment)
I think it's worth noting that we have a similar pattern of properties for
fill, and might want to use the same name there: https://drafts.fxtf.org/fill-stroke-3/ (So we should pick a name that works for both.)SebastianZ commentedon Jan 1, 2024
I still slightly prefer the initially suggested
background-layerover the others. Though I am ok withbackground-overlay.I am ruling out some for myself here, which I think don't fit well.
background-patternWhile "pattern" indicates that the solid color is excluded, it somewhat sounds like it allows creating simple patterns and not to the images.background-screen"screen" refers to the monitor in virtually all contexts, not to a layer.background-cover"cover" rather has a meaning of a single thing, like a book cover, not of multiple layers.background-sliceWe already haveborder-image-slicewhich refers to slicing an image. So "slice" here may rather confuse authors.background-image-stackThis conveys the idea of different image layers, though it looks like a longhand ofbackground-imagewhile it actually is a shorthand for it and the otherbackground-*properties.background-media"media" sounds like it covers images, videos and other types of media.background-image-listSame reason as withbackground-image-stack.background-image-layerSame reason as withbackground-image-stack.Sebastian
SebastianZ commentedon Jan 1, 2024
To make progress on this, let's get some straw poll for the different suggestions. As there are many, I'll split them up into several comments. Please add your name besides the entry your prefer or add your vote to the comment. (I've added the names of members who expressed their opinion on one of the proposals in #8726.)
background-layer(3): @SebastianZ, @LeaVerou, @Crissovbackground-overlay(1): @fantasaibackground-stack(0):background-list(0):background-canvas(0):background-pattern(0):SebastianZ commentedon Jan 1, 2024
background-sheet(0):background-screen(0):background-cover(0):background-image-stack(0):background-image-list(0):background-image-layer(0):Note that I explicitly left out
background-sliceandbackground-media, because I think they miss the idea behind that property. If somebody thinks differently, please leave a comment!Loirooriol commentedon Jan 2, 2024
I will object to adding
background-image-whateveras a shorthand ofbackground-image.jonjohnjohnson commentedon Jan 2, 2024
background-texture?fantasai commentedon Aug 8, 2024
We went with
color-layers()in #8431 (comment) so I think we should definitely not go with the singularbackground-layerhere. :)(I think
background-layersdoesn't convey as well asbackground-overlaythat it doesn't include the background-color layer, so I'm not totally convinced. But at least it doesn't have the singularity weirdness ofbackground-layer.)SebastianZ commentedon Aug 8, 2024
I want to point out that all list-valued properties so far have singular names, e.g.
transition,animation,box-shadow, and so do allbackground-*properties. So, even when it's clearer using the plural version here, it breaks consistency. That said, I don't have a strong opinion on this.What I do have a strong opinion about is the lack of votings so far. It would be great if we got some more opinions on this, so we can resolve on a name.
Sebastian
JoshTumath commentedon Aug 30, 2024
I'm also voting for
background-layer. To me it seems the most self-explanatory.SebastianZ commentedon Aug 21, 2025
While there wasn't much feedback, the votes clearly lean towards
background-layer. So I think it's fine to resolve on this.@astearns I propose to resolve on naming the shorthand
background-layerasynchronously.Sebastian
astearns commentedon Sep 8, 2025
I’d like @fantasai to weigh in first since in her last comment she was opposed to
background-layerSebastianZ commentedon Sep 8, 2025
Also, @Loirooriol seems to suggest to revert the resolution to add the property in the first place in #8726 (comment). So, if we decide to remove the property in favor of covering the outlined use case with the newly introduced
revert-rulekeyword, then the discussion about its name is moot.Sebastian
10 remaining items
nt1m commentedon Nov 13, 2025
There's some CSSOM compat concern around shorthanding properties in general: #8398. I really think we should try and solve it though, so we don't have to force ourselves to a subpar developer experience (not just in this situation, but in others too).
I doubt there are sites using invalid syntax atm that would become valid with my suggestion though.
Loirooriol commentedon Nov 13, 2025
#8398 is about turning an old longhand into a shorthand of new properties.
This would be turning an old lonhand into a shorthand of old properties. I think it won't be web compatible.
LeaVerou commentedon Nov 14, 2025
I agree. Authors use
background-imageall over the place assuming it won't reset any other property.nt1m commentedon Nov 14, 2025
Ah right, that's definitely a compat concern
SebastianZ commentedon Nov 25, 2025
So shorthandifying
background-imagefalls flat, unfortunately. And @Loirooriol is not against keeping a property for it if we can agree on a name.@fantasai Would you object to name the property
background-layer(singular)? (See my comment on why it should be singular.)Sebastian
Loirooriol commentedon Dec 18, 2025
To be precise, I said "agree on a good name". To be honest, I don't like any of the suggestions I have seen so far, other than Tim's, but that one doesn't seem web compatible.
The attempt for a poll above didn't get much traction, so it seems people aren't very enthusiastic either about the proposed names.
A suboptimal name can be acceptable for an important functionality that can't be achieved in other ways, but here the usecase is covered by
revert-rule, so I think the bar for a good name should be higher.Then my preference is to not add the shorthand at this point.
tabatkins commentedon Jan 23, 2026
This would be good to poll in-person at the f2f.
SebastianZ commentedon Jan 24, 2026
I won't be at the F2F. So if you do a poll at the F2F, it should consider the results in #9083 (comment) and #9083 (comment) plus @Loirooriol's point to drop the property again.
FWIW, my vote still goes to
background-layer, even though it is already covered byrevert-rule, as pointed out by Oriol. And I could also imagine this use case to be covered by additive CSS in the future.Though my opinion is relatively weak on this.
Sebastian
css-meeting-bot commentedon Jan 27, 2026
The CSS Working Group just discussed
[css-backgrounds-4] Decide on name for shorthand covering everything `background-*` except `background-color`, and agreed to the following:RESOLVED: close this issue, no changeRESOLVED: No change for now, use `background` shorthand + `background-color: revert-rule`The full IRC log of that discussion
<dholbert> astearns: Tab suggested having a poll on this<dholbert> oriol: my idea is, out of the names proposed in the issue, I'm not liking any of them
<dholbert> ...I liked Tim's suggestion, but it's likely not web-compatible
<dholbert> oriol: there were attempts at a poll in the issue with github-reactions, but they didn't get much traction
<dholbert> oriol: getting back to use-case that we're trying to cover -- people want to set all props related to background images without affecting color
<dholbert> oriol: we have a new tool, "preferred rule"
<dholbert> s/preferred/revert/
<dholbert> oriol: you can set the background shorthand to all the values related to background-images, and this will set background-color, and then you can set background-color to revert-rule
<fantasai> `background: stuff; background-color: revert-rule`
<dholbert> ...and that will undo the effects of the shorthand
<lea> +1
<dholbert> oriol: given that we have a tool, and none of the proposals on the issue seem appealing, I'd prefer to not add this new shorthand
<lea> q?
<lea> q+
<dholbert> TabAtkins: I think we can wait, yeah
<dholbert> lea: I agree with TabAtkins and sebastian. Benefit seems marginal, revert-rule tool seems fine
<bramus> +1
<dholbert> astearns: proposed resolution is to close this issue no change for now
<dholbert> RESOLVED: close this issue, no change
<lea> s/revert-rule tool/revert-rule workaround/
<fantasai> RESOLVED: No change for now, use `background` shorthand + `background-color: revert-rule`