JPG Welcome Image Does Not Show in Rails App

I’ve been working on a Rails application for some time now. While developing my Rails app, I’ve used a temporary image that I had found online as my background image on my welcome page. However, I’m now in the final process of finishing my Rails app and I want to replace that image with a custom one. The problem is, the image does not show. Any ideas?

I have placed the image in the public/assets/images/background.jpg.

Here is the CSS:

.bg {
                /* The image used */
                background-image: url('/assets/background.jpg');

                /* Full height */
                height: 100%;
                max-height: 2000px;

                /* Center and scale the image nicely */
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;

Below you will find the the body html:

<div class="bg">
        <h2 class="w3-wide" style="font-size: 400%; text-align: center; 
        padding-top: 20%; color: white; min-padding: 30px">Fashioned For Him</h2>

This results in a blank, white background. Using the exact code above, my image during the development process worked perfectly. The only difference was that I linked to the other image using the online link where it was stored.

I have tried all of the following:

  • Storing the image directly in the folder with the welcome page, index.html. Then I changed the path to the image from (‘/assets/background.jpg’) to (‘background.jpg’), yet nothing happened.
  • I also placed the image directly into the public folder, and then edited the image path to match. Yet nothing happened.

Any ideas?

If the image is placed under public/assets and you can view the image at http://localhost:3000/background.jpg(assuming rails is running at port 3000) then you should be able to link that from CSS file like
background-image: url(‘/assets/images/background.jpg’);.