Background Image not loading on heroku open

Question

When deploying my app on heroku my background image is not showing up..

My Logo image does show up though.

They are both in my assets/images file

My background is referenced in my assets/stylesheets/application.css.scss file:

body {
    margin:0px;
    background: url('city-lights1.jpg');
}

And my Logo is referenced in my views/layouts/pages/home file:

<div class='log-image'>
        <%= image_tag("logo.png", alt: "image", class:'img-responsive logo') %>
</div>

Why does my background image not load but my logo image does?

I'm using twitter bootstrap

Answer 1

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 .

Answer 2

In addition to the previous solution, you will need this: 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