Image urls for Rails 4 + Less not including the ha

Question

I have a Rails 4 application and am using the less-rails gem. In main.css.less, I add a background image to the site using:

body {
  background-image: image-url("background.jpg");
}

Everything works fine locally, but when I push up to my server with precompiled assets, the image url is not updating to include the hash. That is, the image now lives at public/assets/background-074c0b767cd8cfb2da93b37ea3596326.jpg but my css file still says url(/assets/background.jpg).

The link below seemed very promising, but none of the recommended solutions have worked (most of them are specific to sass, although I did try image-url, asset-url and their respective -path's).

How to reference images in CSS within Rails 4

Any ideas?

Answer 1

The "hash" is known as asset fingerprinting, and is a standard feature of the Rails asset pipeline, which means it should work if everything is done right :)

We've had experience of this before, and you're 90% of the way there with it

I'd recommend 2 fixes:

---

1. Use asset_url in your LESS:

body {
  background-image: asset_url("background.jpg");
}

---

2. Precompile your assets

#config/environments/production.rb
config.serve_static_assets = true

#cmd
rake assets:precompile RAILS_ENV=production

This should make your assets static, thus allowing your CSS to load them with no issues!