Rails: How to set a background image in rails from css?

Solution 1:

In your CSS:

background-image: url(background.jpg);

or

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

In environments/production.rb:

# Disable Rails's static asset server (Apache or nginx will already do this)  
config.serve_static_assets = false

# Compress JavaScripts and CSS  
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed  
config.assets.compile = false

# Generate digests for assets URLs  
config.assets.digest = true

Solution 2:

For sass (scss) this code works with the following image path

app/assets/images/pictureTitle.png

body { 
  background-image: image-url('pictureTitle.png'); 
}

You might also need to restart your rails server.

Solution 3:

If you have the image in your public directory like public/bg.jpg

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

If you have image in app/assets/images/bg.jpg

 background-image: url('/assets/bg.jpg')

Solution 4:

The problem could be more deeply ingrained than you think. It most likely is not a Rails asset problem as many presume, but 'miscommunication' between your html elements. Here's why:

1. First of all, fool proof your code by puting the backgound image in the body element.

   body {
   background: url('pic-name.jpg') no-repeat center center;
   background-size: cover;}  /* For a full size background image */
   

2. Then check your developer tools console to see if the image is getting loaded correctly or it's giving a 404 not found.
3. If giving a 404, then your css syntax is not correct, try any other of this post's answers until you no longer get a 404. For me the above example worked:

4. Once you realize that the console doesn't give a 404 anymore, confirm the image actually loads with this:

   http://localhost:3000/assets/pic-name.jpg

   • I understand that this could vary per individual, but try it and make sure you've used your pic's name.
5. If it loads well, now you know the culprit - the body element is hiding something - when you put the image in the body, it works, when you put it in another element, it works not.

6. This is the trick; in that other element where you want the background image, mine was header, insert some text or some lines, Yes, just plain text or something! Mine was:

   <header>
      <%= render 'shared/navbar' %> # To have the nav's backgrond as the image
      <div class="container">
         <div class="text-center">
           <h2><strong>Nairobi</strong></h2> <hr>
           <h2><strong>Is</strong></h2> <hr>
           <h2><strong>Just a Beula Land</strong></h2> <hr>
         </div>
     </div>
   

7. And alas, it worked! Though it didn't show the full image, just the upper part. But at least I knew it worked.

8. And if you add more text, the image stretches downwards (more gets shown)

Hope this helps someone. And along with this I realised that it was not that easy to place the background image to cover the nav as well, esp if using bootstrap; both the nav and your other element need to be children of the same parent element, eg, mine was the header as shown above, and you'll also have to render the nav inside your, say, homepage.html.erb, and every other page, as opposed to just rendering it on the application.html.erb

Update

Okay, this is what I did to show the full background image without inserting texts here and there. In my application.scss, where you have your css, I simply added the height property, like so

     body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;
height: 600px;}

N.B: Using height: 100% didn't work.