11

I have a problem with my rails application (Rails 4.0.0.rc2, ruby 2.0.0p195).

The behavior is weird: My localhost shows the background picture properly, Heroku doesn't.

In the heroku logs I can see the following error:

ActionController::RoutingError (No route matches [GET] "/assets/piano.jpg"):

I have created the background image by inserting the following code in my custom.css.scss:

.full { 
  background: image-url("piano.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

And I am triggering this with the following code, which I have on my static page:

<body class="full">
....
</body>

I already have the gem running in production:

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

In production.rb I have set the following setting to true:

config.serve_static_assets = true

However, the image is not being shown. Can you help me out?

2

5 Answers 5

25

Make sure you set these in your production.rb file

config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true
3
  • This was my issue. After nearly bashing my head in over the past week I'd like to say thank you!
    – IIllIIll
    May 13, 2015 at 21:58
  • Can you explain why did this solution worked? @Brock90
    – Recomer
    Mar 12, 2016 at 10:00
  • Note that config.serve_static_assets has changed to config.public_file_server. Also, thanks for this answer. I just needed config.assets.compile even though I precompiled my assets. Feb 13, 2017 at 18:31
12

I have found the solution for the issue myself:

RAILS_ENV=production bundle exec rake assets:precompile

After running this command in my console, the picture was shown properly.

Previously I had only tried to run:

rake assets:precompile

That alone didn't help. You have to address the production environment in your command.

I hope this serves as a reference for other users.

4

I needed a combination of the other answers to work for me.

I needed to use @Brock90's production config settings as well as precompile the assets as Alex mentioned.

0

With the background property and SASS:

background: image-url("my_image.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
-2

Don't have your pictures in sub-directories within the images/ directory

If anyone is still having trouble with this. I was looking everywhere for a solution and I thought I tried everything. For my case I had instances like

background-image: url("containers/filled/Firkin-Keg-5-Gallons_filled.png");

So I had folders within images. This worked fine for localhost, but it would not work on heroku.

background-image: url("Firkin-Keg-5-Gallons_filled.png");

no more sub-directories.

EDIT This is wrong. Refer to comments below for proper usage

2
  • 2
    This is dead wrong. Sub-folders work perfectly. You must however use it correctly: background-image: url(image_path("containers/filled/Firkin-Keg-5-Gallons_filled.png")) and make sure your stylesheet file has the ending .scss
    – Eyeslandic
    Jun 10, 2017 at 22:05
  • Use the built in asset pipeline SCSS helpers to link to your pipeline compiled assets. There are a bunch but each one links to the corresponding /app/assets path: image-url, font-url Jan 19, 2018 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.