Using CSS3 background-size within the `background` shorthand property results in syntax error

CSS3’s new background-size property can be included in the background shorthand declaration by separating it from the background-position specification with a forward slash, like this:

div {
    background: url('/path/to/image.png') left center / contain no-repeat;
}

The result is a syntax error, though, with the parser obviously choking on the / contain part—removing it also makes the error disappear.

Of course it is possible to work around this issue by escaping the entire value of the background property with ~"…", but it would be really nice to be able to use the default syntax without restrictions.

[seven-phases-max]

@gpv-dev

Your result is expected if you compile w/o --strict-math=on option. By now for such statements (with a one or two exceptions, e.g. font property) you have to use either --strict-math=on or put some escaping for /, e.g.: ~"0/100%".

[juukie]

Thanks @seven-phases-max, got it working: url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat; url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;