Kumaro Kumaro - 4 months ago 17
CSS Question

Heroku css background image doesn't work

I'm very frustrated as I have a rails application and locally everything works fine.
I use some css background images but after deploying on Heroku the css background images were not shown...

I have googled a lot and I know thats a problem with static assets but no solution works for me.

in my css.erb file:

.fade-carousel .slides .slide-1 {
background-image: image-url("ich.jpg");
}
.fade-carousel .slides .slide-2 {
background-image: image-url("gruen.jpg");
}
.fade-carousel .slides .slide-3 {
background-image: image-url("see.jpg");
}
.fade-carousel .slides .slide-4 {
background-image: image-url("huette.jpg");
}


I' have added this to my gemfile:

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


And I have added following to my config/production.rb:

config.serve_static_files = true
config.serve_static_assets = true


But nothing works :(. When I deploy the project to heroku a get no background images and following log message:

ActionController::RoutingError (No route matches GET]"/images/huette.jpg"):
ActionController::RoutingError (No route matches GET]"/images/see.jpg"):
ActionController::RoutingError (No route matches GET]"/images/gruen.jpg"):
ActionController::RoutingError (No route matches GET]"/images/ich.jpg"):

Answer

This is the right way to call your images when they are in the asset folder:

.class { background-image: url(<%= asset_path 'image.png' %>) }

Try that and let us know.

Comments