Not sure how to do this. I'm setting up a multi-lingual site with a couple of locales and I have 3 different environments set up. I've set up some environmentVariables for assets store and assets path these work fine in the templates.

However how do you deal with background images in the CSS file? Can you include the Twig code? i.e. add {{ craft.config.environmentVariables.sitePath }} to the image path I'm assuming not as CSS uses the curly braces. I know I can add the full URL to the image but this is no good when trying to work within different environments where the overall domain path will be different each time.

Anyone come across this problem and have any ideas?

Many thanks.

1 Answer 1


The easiest option is probably to use inline styles in your markup for the relevant element(s):

{% set sitePath = craft.config.environmentVariables.sitePath %}

<div class="foo" style="background-image:url('{{ sitePath }}/assets/bg.jpg');">
    <img src="{{ sitePath }}/assets/logo.png" alt="" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.