Background images do not render on Ruby on Rails a

Question

I am attempting to have a image render in the background of a div with the class head.

My application view is written Haml and the body is defined as follows:

%body
    .container
        .head
            .sixteen_columns
            .top-nav

Included in my application stylesheet is:

.head {
    background-image: url(/images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

I have tried a number of variations to specify the path of the image and altered the image name several times but to no avail.

What is the issue?

Answer 1

Consider using the asset_path helper when referencing images in your stylesheet. Documentation may be found here (check out 2.2.1)In the context the CSS you listed you would heave

.head {
  background-image:url(<%= asset_path 'background_image.jpg'%>); 
  width:100%; 
  height:auto;
}

Note: This requires that your style sheet be an erb.

Doing so offers a number of advantages over explicitly stating the path, one being that as the structure of rails application changes with new version releases, you will not need to change anything in your code in order for that image to be referenced properly.

This may seem like overkill just to reference an image but it's one of the many conventions of Rails that are difficult to get used but great! as your application grows and changes, hopefully enabling it to better endure the test of time.

Answer 2

Solution:

It turned out to be a combination of two things. I used this format for the background image:

background-image: url(../images/background_image.jpg);

However, the .head div was renbdering with a height of 0. I added a fixed height to test, and it all showed up perfectly. I can work with this from here.

Thank you all so much for the help!!

Answer 3

Assuming you're using Rails 3.1 or beyond, and that you're using the asset pipeline properly for your images, you can include your image file by doing the following:

.head {
    background-image: url(/assets/background_image.jpg); 
    width: 100%; 
    height: auto;
}

The reason for this is because of the way the asset pipeline works. It compiles your assets at run time and it places all of your assets in a folder called /assets/. It also ignores subfolder structuring and it just dumps everything into the root /assets/ folder, not /assets/subfolder/.

Answer 4

In rails 4 you can now use a css and sass helper image-url:

div.logo {background-image: image-url("logo.png");}

If your background images aren't showing up consider looking at how you're referencing them in your css files.

Answer 5

Try running

rails -v

from the console to confirm what version of Rails you're on.

It sounds like you're running a rails 2.x application, correct? That should mean that you're serving images, js etc from the /public directory. One important gotcha that tripped me up setting background images in css is that the paths you specify are relative to the directory the stylesheet is in(e.g /public/stylesheets), not the root directory of the project itself.

Have you tried changing the path to go up one directory from where the stylesheet is located?

.head {
    background-image: url(../images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

EDIT: What other paths to the bg image have you tried?

Some other possibilities could be:

  background-image: url(images/background_image.jpg); 
  background-image: url('../images/background_image.jpg'); 

One other thing to check would be to load the view and examine the div in Google Chrome using the inspector (Ctrl Shift + I). Select the div and examine the styles Chrome is assigning to it.

Also, double check that it's still named background_image.jpg Can't tell you how many times I've gotten burned by some typo I overlooked ;)