Heroku Does Not Serve Background Image, Localhost Does

Heroku does not serve background image, localhost does?

Make sure you set these in your production.rb file

config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

Heroku Not Showing SCSS Background Images

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.

My background image is not showing in Heroku (I am NOT using Ruby or Rails)

The problem was the .hero-background:before pseudoelement had a z-index of -1 but the body wasn't transparent. On localhost, I guess that didn't matter, but on heroku it did.

CSS Background Images Not Showing in Heroku

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

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

Background image not displaying on heroku flask deployment

I've resolved this question. I realize now that because this is a Flask app that it needs to be handled differently.

The following change will correct the error: change the file structure to put the image in a static folder (Flask knows to look for this) and then change the url call.

file-structure

procfile
requirements.txt
app.py
static
  |- img
      |- bg.jpg
templates
  |- index.html
  |- positive.html
  |- negative.html
  |- bg.jpg

and

background-image: url('/static/img/bg.jpg');

I'm not sure why this resolves the problem but it works!

Rails 4 - Background Image Appears in Localhost but not in production

Your problem with almost certainly be to do with rake assets:precompile & your production environment

A good test will be to Right-Click > View Source on your production app and click on the CSS file where your background image is called. If your problem is your CSS is calling url("background-image.png") & when you click onto the file, it doesn't show, the solution is to use SCSS to precompile the assets dynamically

---

Precompiling The Assets With SCSS

We had the problem where you couldn't access the image files in the CSS, and found it was because the CSS was only referencing static url() locations; and in precompile, our app was calling images "backgroun-image-234234nsdfasfdjasdfk2jij234ij32i.png"

The way to fix that is to use SCSS to create dynamic links to the assets; allowing your app to put the correct path to the images, etc. Here is some live code:

#application.css.scss (yes, you need to rename it)
@import 'layout/body'

#app/assets/stylesheets/layout/body.css.scss
body {
    background: asset_url('background-image.png')
}

If you do this, and then when you push to production, you perform these commands, it should work:

rake assets:precompile RAILS_ENV=production

---

Related Topics