Search code examples
htmlcssshorthand

CSS shorthand attribute with gaps


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?


Solution

  • 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.