-1

This works:

background: none center no-repeat
background-size: contain

This does not work:

background: none center contain no-repeat

According to MDN, the background shorthand property should be able to set the background-size as well as the other properties, but when I use it in this way (or with "contain" at other positions within the descriptor), Chrome ignores the entire background setting, and Dev Tools says "Invalid property value".

The workaround of simply putting the background-size as a separate property works, but it seems odd. What's the recommended way to define all these attributes?

(My actual code has a background image URL, but the phenomenon exhibits just as much with "none".)

The formal grammar is extremely detailed, but I believe that my syntax is correct.

rosuav
  • 466
  • 4
  • 12

1 Answers1

1

From MDN:

The value may only be included immediately after , separated with the '/' character, like this: "center/80%".

To clarify: The solution is to write background: none center/contain no-repeat, instead of separating them with spaces.

Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
Nicolas Goosen
  • 583
  • 5
  • 14
  • Thank you. Why couldn't this be just answered instead of being closed as a duplicate of a question that looks completely unrelated?!? – rosuav Feb 23 '22 at 20:16
  • To clarify: The solution is to write `background: none center/contain no-repeat`, instead of separating them with spaces. This was decidedly NOT OBVIOUS from the linked "duplicate" question, which had the opposite issue. – rosuav Feb 23 '22 at 20:18
  • 1
    @rosuav I am going to take liberty of adding your comment to the answer here – Mark Schultheiss Feb 24 '22 at 22:43
  • Thanks. It's sad that this question got closed, meaning that I'm the only person who'll see this very helpful answer. But that's Stack Overflow for you: once a question is deemed "inappropriate" or "duplicate", there's no responding to it. – rosuav Feb 25 '22 at 23:04