CODEWITHSUNDEEP
cssruby-on-railsheroku
Liz
Liz

Reputation: 1437

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

Upvotes: 10

Views: 2534

Answers (9)

Mark M
Mark M

Reputation: 91

I had the same problem, I was using

background: url("/assets/homebackground.jpg") no-repeat center center fixed;

on my application.css. It worked on localhost but no image was showing on Heroku. I changed the following from false to true:

# config/environments/production.rb
   YOURAPPLICATION::Application.configure do

   # your config settings
   config.assets.compile = true

   # your other config settings
end

Upvotes: 0

Liz
Liz

Reputation: 1437

Unfortunately, between all of the wonderful answers here, I never did solve the problem. I did, however, figure out a slightly hackey workaround to use erb-linked images from the html.erb documents instead of the .css.scss documents.

I linked images this way in the HTML:

<div class="row hero-image-row">
  <div class="hero-image-outer text-center">
    <div class="hero-image-inner text-center">
      <%= image_tag 'bg-hero-000.jpg', class: "hero-image",alt: "strong man and woman lifting weights" %>
    </div> <!-- hero-image-inner -->
  </div> <!-- hero-image-inner -->
</div> <!-- row -->

Then used CSS to create a background-ish feel to the images:

.hero-image-outer {
   width: 300%;
   height: 600px;
   overflow-y: hidden !important;
   border-bottom: solid thick red;
 }

 .hero-image-inner {
   width: 66%;
   overflow-x: hidden !important;
 }

 .hero-image {
   height: 600px;
   margin-left: -50%;
   z-index: 0 !important;
 }

 @media screen and (min-width: 1100px) {
   .hero-image-outer {
     width: 100%;
   }

   .hero-image-inner {
     width: 100%;
     height: 600px;
   }

   .hero-image {
     width: 100%;
     height: auto;
     margin-left: 0%;
   }
 }

 .overlap-hero-image {
   margin-top: -500px;
   height: 500px;
 }

Definitely not perfect, and it doesn't solve the great Heroku CSS image mystery of 2016, but it works well enough for the purposes of this site. Thank yous to all of my answerers for taking the time to dig into this with me.

Upvotes: 0

Gui LeFlea
Gui LeFlea

Reputation: 835

I see multiple issues related to your configuration. The images you posted show the 404 errors, but the errors on localhost are different from the ones on the Heroku app. The ones on the Heroku app are related to an absolute path for a CSS file, and once you resolve that errors you'll be able to see the images on Heroku.

The Heroku app is referencing an absolute path to a bootstrap file. The absolute path points to a file on localhost. Since the file exists on localhost it doesn't create the same sort of problem when viewing your app on localhost as it does on Heroku.

Taking a close look at the URL in the error messages you posted: https://pure-gorge-23608.herokuapp.com/Users/yourname/Dropbox/Code/BIA/app/assets/stylesheets/bootstrap.css Failed to load resource: the server responded with a status of 404 (Not Found)

Try searching your codebase for that absolute path. If you're on a Mac or in a similar Unix environment, ack /Users/yourname/Dropbox/Code/BIA

hint: How do I find all files containing specific text on Linux?

When you find the files that contain the absolute path references to the bootstrap file(s), change the reference so that it is a relative path instead of an absolute path.

You could also use find in files if you're on a windows localhost, but it's been a long time since I worked in windows. http://www.howtogeek.com/99406/how-to-search-for-text-inside-of-any-file-using-windows-search/

Good luck and keep at it, your web site looks promising!

Upvotes: 0

vipin
vipin

Reputation: 2510

Try this :

rake assets:precompile RAILS_ENV=production

Since precompilation is done in production mode only, no need to explicitly specify the environment.

Update:

Try adding the below line to your Gemfile:

group :assets do
  gem 'therubyracer'
  gem 'sass-rails', "  ~> 3.1.0"
  gem 'coffee-rails', "~> 3.1.0"
  gem 'uglifier'
end

then bundle install

hope it works :)

Upvotes: 1

M. Karim
M. Karim

Reputation: 942

I think the main problem in Heroku is, its unable to load the bootstrap.css. You have to solve this first.

for bootstrap support, add this two gem, 

gem 'therubyracer'
gem 'less-rails-bootstrap'

specify about this in application.js just after jquery_ujs reference.

//= require twitter/bootstrap

application.css before require_tree . 

*= require twitter/bootstrap

And then remove the bootstrap href references from the <head> in your view file.

I think this will help you to understand more. http://rails-magic.blogspot.com/2016/05/how-to-integrate-custom-bootstrap-theme.html

Upvotes: 1

Jonathan
Jonathan

Reputation: 11494

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.

Upvotes: 2

socialpiranha
socialpiranha

Reputation: 172

[EDIT]

Found this in the Rails 4 Asset Pipeline documentation (2.3.2). I know I posted a variation of this earlier, but maybe try each of these below and see what works?

For images specifically:

image-url("rails.png") becomes url(/assets/rails.png)

image-path("rails.png") becomes "/assets/rails.png"

The more generic form can also be used:

asset-url("rails.png") becomes url(/assets/rails.png)

asset-path("rails.png") becomes "/assets/rails.png"

Upvotes: 1

Pitabas Prathal
Pitabas Prathal

Reputation: 1012

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;

Upvotes: 1

Wes Foster
Wes Foster

Reputation: 8900

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

Upvotes: 1

Related Questions