Less.js: Using CSS3 background-size within the `background` shorthand property results in syntax error

Created on 10 Jan 2013 · 7Comments · Source: less/less.js

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.

bug medium priority

Source

yggi49

Most helpful comment

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

seven-phases-max on 7 Jan 2015

👍2

All 7 comments

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

plumbojumbo on 16 Jan 2013

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

lukeapage on 16 Jan 2013

Fixed on master

lukeapage on 2 Feb 2013

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.

yang-jandro on 7 Jan 2015

@gpv-dev

seven-phases-max on 7 Jan 2015

👍2

@seven-phases-max

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

yang-jandro on 8 Jan 2015

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;