Search code examples
cssruby-on-railsheroku

Heroku Not Showing SCSS Background Images

I have a Rails app that uses background images from a style.css.scss file. I have found multiple ways of having the images show up on localhost, but no ways to get them to display on Heroku.

I have looked at MANY posts on SO like this and this, as well as other sites like this, but nothing has worked so far.

Here is the code I have in my style.css.scss:

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

However, I have also tried background-image, image-url, asset-url, and numerous other permutations as found in the linked SO posts.

I have this in my production.rb file:

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

And this in my application.html.erb file to call the css sheet:

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

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

config.assets.initialize_on_precompile = false

Any ideas on how this can be resolved would be happily received!

ADDITIONAL INFO

Here's my gemfile:

source 'https://rubygems.org'

gem 'rails', '4.2.5'

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

group :development do
  gem 'sqlite3'
  gem 'binding_of_caller'
  gem 'better_errors'
end

gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'friendly_id', '~> 5.1.0'
gem 'google-analytics-rails', '1.1.0'
gem 'paperclip'
gem 'meta-tags'
gem 'bootsy'
gem 'devise'

Here are my console errors in localhost: enter image description here

And in Heroku: enter image description here

Solution

  • Look at your paths.. It must be something with your configuration. You've got your absolute path in code somewhere, either that or it's on track to something related. Search your code-base and make sure you don't have your own machine's absolute path hard-coded anywhere. Make sure it is all relative. /Users/elizabethbayardelle/Dropbox/Code/BIA/ should not be anywhere in your source, but somewhere it is being used in your herokuapp instance. On your localhost screenshot you've even got a path to heroku.com... how? A second take over how you've configured things will fix this I'm sure.