Background image not showing up in heroku

Question

I'm having issues with the background image for my heroku site, locally using

background-image: url('background_stripe.png');

works but when deployed the file is broken

I've tried using

background-image: image-url('background_stripe.png');
background-image: url(image-url('background_stripe.png'));
background-image: url(image_url('background_stripe.png'));

none of which worked locally or on heroku.

Using bash I've found out heroku has named the image file background_stripe.png but it has no hash and its a broken image

Solution 1

In your production.rb add the following line

config.serve_static_assets = true
config.assets.compile = true

or you can try to precompile the assets locally using

RAILS_ENV=production rake assets:precompile

Solution 2

When your assets get compiled for production, they get a 'digest' added to the end of them for versioning purposes. You should use asset_path('background_stripe.png') if you're defining the class in your views or image-url('background_stripe.png') if you're defining them in your SCSS files as referenced in the docs.

Comments

[MikaAK]

Yes i used image-url aswell since its in app/assets/images but it didn't seem to work

[MikaAK]

This worked thanks! Specifically changing the values to true.

[Mei]

Changing the production.rb works. Thanks, @deep. It looks like config.serve_static_assets will be deprecated. config.serve_static_files should be used in its place.

[rosalynnas]

worked for me using image_url, with an underscore instead of a dash.