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:
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 */
- Then check your developer tools console to see if the image is getting loaded correctly or it's giving a 404 not found.
- 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:
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.
- 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.
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>
And alas, it worked! Though it didn't show the full image, just the upper part. But at least I knew it worked.
- 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.
background: url(<%= asset_path 'background.jpg' %>)
worked for me guides.rubyonrails.org/asset_pipeline.html#css-and-erb