How to set multi-lingual image paths in a css file for different environments?

Question

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.

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="" />
</div>