bg-image internationalization by CSS

Question

I have a Rails project that needs different images for each language, however and image is pulled from CSS and I can’t change that. How to change the image according to the chosen language?

  background: url("/caminho/imagem.jpg");

Edit: I received a lot of responses and forgot to provide some hints, my ruby is 1.8.7 and Rails is 3, it is not advisable to create another css file and although I am not sure, my css is not 2 nor any other more recent.

edit2: and I’m using haml instead of html

Answer 1

Complementing the excellent response from @Papacharlie:

After you’ve created the different CSS for each language, use the following code to tell Rails that these CSS should also be precompiled for production:

# /config/initializers/assets.rb
Rails.application.config.assets.precompile += ["imagens.pt-BR.css", "imagens.en.css"]

Read more:

• Official Guide to Assets

Answer 2

what worked was to create 2 blocks of code within the same css file:

class-br{
  atributos-br
}
class-en{
  atributos-en
}

and use the class attribute in haml by assigning the locale as variable:

%li{:class=> "class-#{params[:locale]}"}

Answer 3

In PHP use translation packages for each language:

language/
     pt.php
     en.php
     es.php

You can create a CSS only with the images for each language. Separate the images into a css-language.css and load whatever refers to the language.

css/
     pt.css
     en.css
     es.css

css/pt.css background: url("/caminho/imagem.jpg"); // background escrito em português
css/en.css background: url("/caminho/imagem.jpg"); // background escrito em ingles
css/en.css background: url("/caminho/imagem.jpg"); // background escrito em espanhol