Problem using variables for Background image URL

Jane's Avatar

Jane

30 Jun, 2010 07:40 AM

Hi,

I have a variable defined as :
@image_url:'wp-content/themes/r121fi/styles/gr/header.jpg';

I want to use it in the header div as follows:

header {

background-image:url(@image_url); }

It puts the css as :
background-image:url("@image_url") and does not replace the variable.

Also, is it possible to concatenate variable and string.
For eg:
@image_url:'wp-content/themes/r121fi/styles/gr/';

header {

background-image:url(@image_url+'header.jpg'); }

Waiting for some help at the earliest.

Thanks & Regards,
Jane

  1. 1 Posted by Adam on 01 Jul, 2010 11:25 PM

    Adam's Avatar

    I second this question.

  2. 2 Posted by federico vezzol... on 04 Jul, 2010 02:24 PM

    federico vezzoli's Avatar

    wondering that here too...
    i'm using it in a wordpress theme and would be sweet to be able to save the template path for make thing a lot easier and faster.

  3. 3 Posted by Liam on 05 Jul, 2010 03:11 PM

    Liam's Avatar

    Yeah, if there is a solution to this that would be wonderful.

  4. 4 Posted by Ari on 14 Jul, 2010 05:00 PM

    Ari's Avatar

    Been wondering about string concatenation. Your first issue isn't an issue for me, the following is valid for me:

    @string: 'img/bg.png';

    body {

    background-image: url(@string);
    

    }

    That works just fine on http://lesscss.googlecode.com/files/less-1.0.32.min.js

    I'd love to concatenate though, have yet to figure out if it's possible.

  5. 5 Posted by jsansbury on 21 Jul, 2010 05:08 PM

    jsansbury's Avatar

    I'd like to do something like this:

    @images: path/to/images;
    
    body {
      background: url(@images/bg-body.jpg);
    }
    
  6. 6 Posted by uipoet on 30 Jul, 2010 11:00 PM

    uipoet's Avatar

    In scss, I could do this:

    @images: path/to/images;
    
    body {
      background-image: url(#{@images}/bg-body.jpg);
    }
  7. 7 Posted by Jo Santana on 23 Sep, 2010 01:27 PM

    Jo Santana's Avatar

    Same issue here.

  8. Support Staff 8 Posted by cloudhead on 23 Sep, 2010 06:24 PM

    cloudhead's Avatar

    There's a way to do this in less.js:

    @path: "/images";
    background-image: url(%("%s/bg-body.jpg", @path));
    
    %s for strings, %d for numbers.
  9. 9 Posted by Jo Santana on 23 Sep, 2010 07:11 PM

    Jo Santana's Avatar

    Thanks for your reply, but it is still not working...
    I'm using the lastest Less.app, with this code:

    @path: "/images"; p.test {
    background-image: url(%("%s/test.jpg", @path));
    }

    I got the following error message: [see attached file].

    Thanks for your help! :)

  10. 10 Posted by Jamie Hoover on 23 Sep, 2010 07:29 PM

    Jamie Hoover's Avatar

    Jamie

  11. Support Staff 11 Posted by cloudhead on 23 Sep, 2010 10:11 PM

    cloudhead's Avatar

    Ah yes, that's actually a bug with url(), here's how you can get around it:

    @base: "/images";
    @url: %("%s/test.jpg", @base);
    p.test {
      background-image: url(@url);
    }

    I'll make sure I fix the url() bug.

  12. 12 Posted by Joe Lapp on 16 Oct, 2010 05:45 AM

    Joe Lapp's Avatar

    I seem unable to use string substitution in Less version 1.2.21. Any ideas? See the attached TextMate snapshot. Thanks!

  13. 13 Posted by thruflo on 22 Oct, 2010 10:16 AM

    thruflo's Avatar

    yup, I can't concatenate with lessc or less.js

    $ lessc screen.less out.css
    ! Syntax Error: on line 15: expected one of , ; } got " after:
    
    @testimg: %(

    with my code being

    @static: "/static/";
    @testimg: %("%simg/bg.gif", @static);
  14. 14 Posted by skill83 on 10 Nov, 2010 10:13 AM

    skill83's Avatar
    @base: "path/to/my/images";
    @url: %("%s/myimage.jpg", @base);
    p.test {
         background-image: url(@url);
    }

    Is working for me, i'm using coda and the less app the problem is that is a bit boring to write everytime for all the classes

    @url: %("%s/test.jpg", @base);
    p.test {
      background-image: url(@url);
    }

    it could be interesting if in a future relase we can cast the output for example:

    @path = path/to/my/image;
    .myclass{
        background-image: url(string(@path+myimg.jpg));
    }

    or

    .myclass{
        background-image: url(_str:(@path+myimg.jpg));
    }

    THANKS

  15. 15 Posted by skill83 on 10 Nov, 2010 12:10 PM

    skill83's Avatar

    I solved my problem with a mixin:

    @path: "/media/disabato/img/";
    .jpg(@img: "", @color: " ", @repeat: "no-repeat", @x: "0", @y: "0", @att: " ") {
        background: e(%("%s", @color)) e(%("url(%s%s.jpg)", @path, @img)) e(%("%s", @repeat)) e(%("%s", @att)) e(%("%s", @x)) e(%("%s", @y));
    }

    so in a class

    .myclass{
        .jpg('bg_header')
    }

    and in any case i can specify more parameters

  16. 16 Posted by mihairu on 15 Nov, 2010 12:36 PM

    mihairu's Avatar

    i have problem with

     @base: "path/to/my/images";
     @url: %("%s/myimage.jpg", @base);
     p.test {
          background-image: url(@url);
     }

    it gives me CharAt error :/ any help?

  17. 17 Posted by mihairu on 15 Nov, 2010 12:47 PM

    mihairu's Avatar

    The exact error of output is, if it helps

    Cannot call method 'charAt' of undefined
  18. 18 Posted by pointcom on 17 Nov, 2010 10:32 AM

    pointcom's Avatar

    Hi,

    I tried this less code :

    @path: "http://www.example.com/images/";
    .bgimg(@img: "") {
        background-image: %("url(%s%s)", @path, @img));
    }
    
    .myclass{
        .bgimg('myimage.png')
    }

    But when I tried to generate the css file, I got this error :

    ! Syntax Error: on line 3: expected one of , ; } got " after:
    
    .bgimg(@img: "") {
        background-image: %(

    Is someone has a solution to my problem ?
    It seems that %() is not interpreted.
    have I misspelled something ?

    Thanks

  19. 19 Posted by Federico Vezzol... on 17 Nov, 2010 10:38 AM

    Federico Vezzoli's Avatar



            On mercoledì 17 novembre 2010 at 11.32, pointcom wrote:

  20. 20 Posted by rnowm on 28 Jan, 2011 11:20 AM

    rnowm's Avatar

    What skill83 wrote works fine, but I prefer something more simple, like:

     @path: "/media/disabato/img/";
     .bg-img(@img: "") {
         background-image :e(%("url(%s%s)", @path, @img)) ; 
     }
     .myclass { 
        background: @my-color 0 0 no-repeat; 
       .bg-img('bg_header.jpg');
    }
    
  21. 21 Posted by Filip Van Tende... on 13 Oct, 2011 08:25 AM

    Filip Van Tendeloo's Avatar

    I know my answer is a bit late, but just for those interested:
    In the latest version of less you can do the following:

    @img-folder: "images/test";
    
    .test {
        background:url("@{img-folder}/test-image.gif") left top no-repeat;
    }
    
  22. 22 Posted by Seth on 30 Dec, 2011 08:56 PM

    Seth's Avatar

    @Filip Van Tendeloo - Thanks for the heads up, that helped me.

  23. 23 Posted by Pioter on 12 Jan, 2012 04:50 PM

    Pioter's Avatar

    @Filip Van Tendeloo - This works for me, but ... (using dotless) ...if there is another nested rule inside mixin - variable is not propaged corretly and I have to create "auxiliary" nested mixin to propagate variable.

  24. 24 Posted by lenensoreinok on 19 Jun, 2013 07:40 PM

    lenensoreinok's Avatar

    good website more on http://www.safecranes.org
    last news see at http://safecranes.org
    just yahoo.com or bing.com you can see it. but not google.com

  25. 25 Posted by chris marx on 03 Mar, 2014 04:52 PM

    chris marx's Avatar

    also note though, that if you do:

    `@img-folder: "images/test";

    .test { background:url("@{img-folder}/test-image.gif") left top no-repeat; }`

    it will not work if you don't use the double quotes inside the url()

  26. 26 Posted by burkJat on 08 May, 2014 03:24 PM

    burkJat's Avatar

    The only good things on bluehost coupon code your desk and get the good from the Crack dir on the page is returned to his rectum. garcinia cambogia australia http://miraclegarciniacambogiablog.com/ - garcinia cambogia canada pure garcinia cambogia reviews garcinia cambogia weight loss reviews This allows you to cook sweet and succulent. Along with food, there is bluehost coupon code 2014 essential.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac