带空格的CSS速记属性

Question

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?

Answer 1

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.