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?

Alex
  • 621
  • 1
  • 8
  • 26
  • http://stackoverflow.com/questions/15257555/how-to-reference-images-in-css-within-rails-4 You may refer to this question. – Nikita Singh Oct 05 '13 at 18:23
  • Yes. However, the problem is not based on the referencing I chose! It has to do with the precompilation of the assets. – Alex Oct 05 '13 at 21:16

5 Answers5

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
Brock90
  • 786
  • 1
  • 6
  • 13
  • This was my issue. After nearly bashing my head in over the past week I'd like to say thank you! – IIllIIll May 13 '15 at 21:58
  • Can you explain why did this solution worked? @Brock90 – Recomer Mar 12 '16 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. – Wylliam Judd Feb 13 '17 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.

Alex
  • 621
  • 1
  • 8
  • 26
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.

Anand
  • 3,690
  • 4
  • 33
  • 64
0

With the background property and SASS:

background: image-url("my_image.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
-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

Daniel
  • 91
  • 1
  • 4
  • 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 '17 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` – Dylan Pierce Jan 19 '18 at 21:02