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

[yggi49]

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.

[plumbojumbo]

Looks like a sub-case of PR #915, but there hasn't been any news on that one for a while ...

[lukeapage]

yes, exactly, thats why it will be in 1.4.0. I'll take on #915 if @dmcass doesn't finish it off.

[lukeapage]

Fixed on master

[yang-jandro]

I seem to be having this problem in lessc 2.1.1.

/* less */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0/100%;
    position: fixed;
}

/* compiled css */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0;
    position: fixed;
}

Running on Linux Mint 17 Qiana using lessc 2.1.1.

[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%".

[yang-jandro]

@seven-phases-max

Thanks for the quick response. You suggestion was exactly what I needed.

[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;