Liz
Liz

Reputation: 1437

CSS Background Images Not Showing in Heroku

I have read tons of posts on SO and other help websites on this issue, but so far nothing has helped. I have images in my CSS that are showing up on my localhost but not when I push my app to Heroku.

Here's an example of an image:

.hero-000 {
    width: 102%;
    background: url(hero-000.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

As suggested by other posts, I have added this to my application.rb:

config.assets.initialize_on_precompile = false

I also added this to my production.rb:

  config.serve_static_files = true
  config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
  config.assets.compile = true
  config.assets.digest = true

And I followed the steps on the Heroku website to precompile assets here.

I really don't know where to go from here, so any help is appreciated.

Upvotes: 2

Views: 1499

Answers (1)

Afas
Afas

Reputation: 806

I had the same problem and I solved using a helper. Try this on your css:

background-image: image-url("hero-000.jpg");

Upvotes: 2

Related Questions