Heroku Not Showing SCSS Background Images

Question

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:

And in Heroku:

Answer 1

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.

Answer 2

If you want to use asset_path in your stylesheets, you'll need to convert them to ERB templates. Example: application.css.erb -- This makes the asset_path helper available within the template.

In most cases, however, the proper method to be used is image-url(). Just make sure that you use it in the correct manner:

background-image: image-url("hero-000.jpg");          # < Correct
background-image: url(image-url("hero-000.jpg"));     # < Incorrect

Answer 3

Ok Liz i got the fix for this issue. just add the line to your config/environments/production.rb if run the server in production mode or add config/environments/development.rb if you run the server in development

config.BASE_URL = 'https://herokuapp.com/'

then

background: url(https://herokuapp.com/assets/hero-000.jpg) no-repeat center center fixed;

the image is not found as by default herokuapp create a subdomain for your app.

try this:

copy that image to public/img folder and then do following

background: url(https://pure-gorge-23608.herokuapp.com/img/hero-000.jpg) no-repeat center center fixed;