CODEWITHSUNDEEP
cssless
Monstr92
Monstr92

Reputation: 404

Parse Error while using Less CSS returns Unrecognised input error message with background properties?

I can't figure out what's wrong with my css using the LESS CSS library.

I'm getting this error when I run my site using LESS. But to me the CSS seems valid. What is wrong with my CSS and or can I not use LESS? 

background: url(css/img/home-bg3.jpg) no-repeat;
    background-clip: ( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -webkit-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -moz-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -o-linear-gradient( transparent, transparent ) , url(css/img/home-bg3.jpg) no-repeat;
    background-size: 100% cover;

Upvotes: 0

Views: 2436

Answers (1)

Harry
Harry

Reputation: 89780

You seem to be having an invalid value for the background-clip property and it is causing less compiler to throw an error.

background-clip supports only border-box or content-box or padding-box or inherit as values.

For example, the below code compiles fine.

.sample{
    background: url(css/img/home-bg3.jpg) no-repeat;
    background-clip: content-box;
    background: -webkit-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -moz-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -o-linear-gradient( transparent, transparent ) , url(css/img/home-bg3.jpg) no-repeat;
    background-size: 100% cover;
}

background-clip - MDN Specification

Additional Note:

The error is actually thrown because of a missing value indicated in the area below:

background-clip: ( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
/*--------------^*/

The below would compile fine but wouldn't have any effect because the value is not supported by background-clip property as per specifications.

background-clip: linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;

Upvotes: 2

Related Questions