Kristijan Korman Kristijan Korman - 4 months ago 13
CSS Question

Less is adding unwanted code on url when compiled to css

So i have something like this:

@color1: rgba(0, 0, 0, 0);
@color2: rgba(0, 0, 0, 0.7);
#start-view .start1 {
.imageGradientOverlay(@color1, @color2, "../images/start/start1.jpg");
}


variable for this is:

.imageGradientOverlay(@color1, @color2, @url-image) {
background-image:
linear-gradient(@color1, @color2),
url(@url-image);

background-image:
-webkit-linear-gradient(@color1, @color2),
url(@url-image);
}


and the compiled code looks like this:

#start-view .start1 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
}


The question is - Why is less when compiling adding two more
../../
?

If i try to add this
/images/start/start1.jpg
the code is compiled fine but this is not what i need.

Answer

Looking at the LESS options, I believe you have rootpath set to add that prefix. So reset the rootpath and it should be fine.

You can test it here - LESS2CSS, just add that option.