Rails. Can't get images to be displayed from a CSS file

Question

I already tried many different approaches and none work, am I missing something here?

This is what I have tried...

th a.asc {
  background-image: url(up_arrow.gif);
}

th a.desc {
  background-image: url(down_arrow.gif);
}

and

th a.asc {
  background-image: url("assets/up_arrow.gif");
}

th a.desc {
  background-image: url("assets/down_arrow.gif");
}

and

th a.asc {
  background-image: url(assets/up_arrow.gif);
}

th a.desc {
  background-image: url(assets/down_arrow.gif);
}

and

th a.asc {
  background-image: url(<%= asset_path "up_arrow.gif" %>);
}

th a.desc {
  background-image: url(<%= asset_path "down_arrow.gif" %>);
}

and...

th a.asc {
  background-image: asset-url("up_arrow.gif", image);
}

th a.desc {
  background-image: asset-url("down_arrow.gif", image);
}

and many more.

I have renamed the file application.css, application.css.scss, application.css.erb, application.scc.scss.erb, index.css, index.css.scss, index.css.erb

I have read this... http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets and 404 when displaying background image in CSS with rails 3.2 and Rails 3.1 serving images from vendor/assets/images and Rails 3.1 and Image Assets and other pages from stackoverflow.

But my images don't appear. They are in the app/assets/images directory. I have double checked and triple checked and yes, they are in that location. I go to Inspect Element in Google Chrome and when I click in the images link, it shows me the broken link image.

development. i have another app that uses `background: #f0f0f0 url('/assets/bg-body.gif') top left repeat-y;` and works no problem. — leonel, Jul 09 '12 at 17:15
Tried. Doesn't work :( This is what it produces `background-image: url(/assets/up_arrow.gif);` — leonel, Jul 09 '12 at 19:05

score 1 · Answer 1 · answered Jul 09 '12 at 18:10

Your last example using asset-url should work, assuming a few things...

The asset pipeline is actually enabled (in config/application.rb look for config.assets.enabled = true)
You have sass-rails is in your Gemfile
If sass-rails is part of a group in your Gemfile (say, the :assets group), you have to make sure that group of gems is being loaded by Bundler in your development environment. In your config/application.rb you should see something like this:
```
if defined?(Bundler)
  # This loads your :assets group in the development and test environments
  Bundler.require *Rails.groups(:assets => %w(development test))
end
```
This particular stylesheet is a SASS stylesheet (i.e., should have the extension .SASS or .SCSS because asset-url is a helper from the sass-rails gem)
This stylesheet is actually loaded in the asset pipeline (it should be named application.css.scss or be required/@included by application.css.scss)

If after all of this is true you still have issues, well, then I'd say something silly is going on.

In your last point, how can I make it work without adding it to application.css.scss? — kinduff, Apr 04 '13 at 19:51

score 0 · Answer 2 · answered Jul 09 '12 at 17:24

Your first one looks fine and works for me. So a few things to check:

Is you image up_arrow.gif in the same directory as the CSS file? (Or, if your CSS is in the HTML page, then the same directory as the html file)
Use the debug tools in a browser, like Firebug in Firefox or in Safari right-click and select "Inspect Element" (turn on developer menu first in the Safari prefs). Look to make sure the computed CSS properties are what you expect, and then look at the resource / network tabs to see that the browser is trying to load your image from the right location.
Is the image being used as a bg image but just not visible because the A element is too small? If you have no text in your A element it will be 0x0. If it has text and/or size properties it might still be too small if the background image has a bunch of blank space. Try making the A tag larger to see if this is the case. E.g. add a width and height property to your CSS, but also a display: block property seems to be necessary.

If you want an image to be the button, you could also just put an IMG tag inside the A tag. It might be a bit easier, though you can get the CSS to work if you want.

This works for me:

<html>
<head>
<style type='text/css'>
    th a.asc { 
        background-image: url(up_arrow.png); 
        width: 32px; height: 32px; display: block;
    }
</style>
</head>
<body>
<table><tr><th><a class='asc'></a></th></tr></table>
</body>
</html>

Ah, I should have read the bottom bit of your question, so definitely it's about loading the images and not having a 0x0 A element. OK, maybe edralph's answer is better. — webjprgm, Jul 09 '12 at 17:26

Rails. Can't get images to be displayed from a CSS file

2 Answers2