1

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?

Ry-
  • 218,210
  • 55
  • 464
  • 476
Matt Hollingsworth
  • 17
  • 2
  • 6
  • What version of Rails are you working on? – Terence Ponce Jul 24 '12 at 02:28
  • Did you check in Chrome Dev Tools or Firebug that your `.head` div does not need `oveflow: none;`? It will be apparent when you inspect it as it will have a 0 height, but all the content will still show up. Try setting the background-image url to some public image like `background-image: url("http://imgur.com/XMuKF.jpg");` << picture of a cat btw. If the image still does not show up, you will know that it's actually a styling issue. – Strelok Jul 24 '12 at 04:36
  • Hey hey! Turns out it was rendering with a height of 0. Which i found very strange because some nested divs inside of it (.sixteen_columns, .top-nav, and others) were rendering normally, at full height. i added a fixed height to test, and bingo, there's the background. – Matt Hollingsworth Jul 24 '12 at 14:29

5 Answers5

0

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/.

Ry-
  • 218,210
  • 55
  • 464
  • 476
Terence Ponce
  • 9,123
  • 9
  • 31
  • 37
0

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.

rudolph9
  • 8,021
  • 9
  • 50
  • 80
0

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 ;)

ply
  • 1,141
  • 1
  • 10
  • 17
  • Yes, rails 2.x, with /public. This did not work. I copied and pasted it. :( Thanks though. – Matt Hollingsworth Jul 24 '12 at 03:55
  • Really strange, I think since you're not using the asset pipeline this should have something to do with the paths, or file names. – ply Jul 24 '12 at 04:20
  • Thanks for the help. Unfortunately, none of this worked. i tried both forms you listed, and also for fun the full URL of the image. I also have now quintiple-checked the spelling of the image. Also, Chrome is showing that the background style is being assigned. – Matt Hollingsworth Jul 24 '12 at 13:46
0

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!!

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
Matt Hollingsworth
  • 17
  • 2
  • 6
0

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.

lflores
  • 3,770
  • 3
  • 19
  • 24