Question

In my view I can load a image with this line of code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div> (this works), but instead I want to load the image from the CSS file.

After reading arround, I have tried this:

#bglion {src: background:url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png', image);}

…but the picture won’t load on the page.
How can I make it work?

(The image is in /assets/images)

Answer 1

I think you’ll have to do a couple of things. Your CSS should probably be something more along the lines of this:

#bglion { background: image-url('BG-LION6.PNG'); }

background is the CSS property you’re actually trying to set. src is not a CSS property. image-url is a Rails path helper that points to your image assets folder. I believe if you just use asset-url it points to your entire assets folder and you would still have to specify that your image is in the images folder.

Secondly, if your div no longer contains an image within it, it will collapse to a width and height of 0 cause there’s nothing to define its dimensions. You’ll have to add more CSS to the wrapper div to define the dimensions of the image. So something like this:

#bglion { background: image-url('BG-LION6.PNG'); width: 100px; height: 100px; }