1

Are CSS shorthands like background property working with a value-gap? I tried it with background. I wanted to set some background values static and the backgorund image dynamicly.

I did the following: 

background: no-repeat contain center;

The background-image should be added later dynamicly. Did i something wrong? The shorthand like i used isn't working. Do i have to use the single attributes (background-repeat, background-size, background-position ...) to realise that?

Flo
  • 137
  • 3
  • 20

1 Answers1

4

The problem isn't the missing background-image. The problem is with the background-size and background-position values. Unlike the rest of the longhands, values for those two have a very specific grammar: background-position followed by a / followed by background-size. See the spec.

This is what it should look like:

background: no-repeat center / contain;

You can always set a background-image separately.

Some other shorthands do have mandatory values. For example, font requires a font-size and a font-family. background does not have any mandatory values.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Working like a charm! Thank you!! – Flo Dec 18 '17 at 04:08
  • Slightly off-topic: love writing `background:0 /cover;` instead of `background-size:cover;`. I do it every chance i get. And, before you say it, I know in theory it's slower, because of shorthand vs regular :) – tao Dec 18 '17 at 04:08
  • 1
    @Andrei Gheorghiu: As long as you're not unintentionally [overriding](https://stackoverflow.com/questions/10455465/why-can-t-i-seem-to-use-background-clip/10455580#10455580) any [longhands](https://stackoverflow.com/questions/15950632/firefox-and-chrome-ignoring-background-size/15951751#15951751) ;) – BoltClock Dec 18 '17 at 04:09