Background Image Not Showing Up in Heroku

Background image not showing up in heroku

In your production.rb add the following line

config.serve_static_assets = true
config.assets.compile = true

or you can try to precompile the assets locally using

RAILS_ENV=production rake assets:precompile

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.

Background Image not loading on heroku open

You're not using the Rails helpers in your application.scss as you did in your home page, so the url of the background image is not referencing the image as expected.

You should use the rails 4 helper in your application.scss file:

background-image: asset-url("city-lights1.jpg");
/* Or */
background-image: image-url("city-lights1.jpg");

Also, you can reference the asset directly (Note that you don't need to include the /image folder in the url). Keep in mind that this url reference is not going to work in Heroku if you precompile your assets:

background-image: url("/assets/city-lights1.jpg");

There's more detailed information about how to reference images within the assets pipeline on the Rails' Official documentation.

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");

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.

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!

Heroku css background image doesn't work

This is the right way to call your images when they are in the asset folder:

.class { background-image: url(<%= asset_path 'image.png' %>) }

Try that and let us know.

---

Related Topics