1

I'm loading the background image bg.jpg image in a SCSS file, style.css.scss

background: url(/assets/bg.jpg)  no-repeat center center;

After precompilation, Sprockets places a copy of the image in the /public/assets directory with a fingerprinted name bg-28779d74f8a6fc51d1b46376428bed54.jpg . And I also can access the image itself from the browser at the /assets/bg-28779d74f8a6fc51d1b46376428bed54.jpg link.

But when I reaload the page in the browser, the background image is not displayed and when I check the CSS in Dev Tools for that particular element I see: 

background: url(/assets/bg.jpg) no-repeat center center;

Shouldn't that be 

background: url(/assets/bg-28779d74f8a6fc51d1b46376428bed54.jpg ) no-repeat center center;

LE: I also precompile the assets with rake assets:precompile having the RAILS_ENV set to production. I thought it would be a good idea to mention this since I noticed many other people had problems because of this. sass-rails helpers "image-url", "asset-url" are not working in rails 3.2.1

Community
  • 1
  • 1
user3790827
  • 695
  • 1
  • 8
  • 17
  • Did you *try* using the `asset-url()`/`image-url()` functions? The question is specific to Rails 3.2, but you're using 4. – cimmanon Aug 08 '15 at 01:22
  • I've read somewhere that if the file is scss the url is enough for sprockets to know that it needs to change the image url. I tried it anyway and it still doesn't work. – user3790827 Aug 08 '15 at 05:58
  • On the other hand using ERB and `background: url(<%= asset_path 'bg.jpg' %>) no-repeat center center;` seems to be working. ( _notice I had to remove the assets from the url link_). But I would prefer a solution that doesn't rely on ERB. – user3790827 Aug 08 '15 at 05:59
  • `background: image-url('bg.jpg') no-repeat center center;` seems to work as well – user3790827 Aug 08 '15 at 06:14

1 Answers1

0

The correct answer is already in the comments, but here it is:

Image URLs in your stylesheets (that point to images in the asset pipeline) should use the sass helper image-url("bg.jpg") instead of url('/assets/bg.jpg')

This helper uses the asset pipeline to find the correct path name for each image.

Source: http://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

mltsy
  • 6,598
  • 3
  • 38
  • 51