Is there a way to set a common image path for LESS files?

Question

I am using the LESS styling language.

Consider the following CSS:

.side-bg
{
    background:url(../img/layout/side-bg.jpg) top no-repeat;    
}
         


        

Answer 1

Here is an updated and clean way to handle image paths with LESS:

Start with your variable:

@imagePath: ~"../images/bg/";

Then use it like this:

.main-bg { 
   background: url('@{imagePath}my-background-image.png') repeat scroll left top; 
}

Make sure the @imagePath variable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.