How to reference images in CSS within Rails 4

Question

There's a strange issue with Rails 4 on Heroku. When images are compiled they have hashes added to them, yet the reference to those files from within CSS don't have the proper name adjusted. Here's what I mean. I have a file called logo.png. Yet when it shows up on heroku it is viewed as:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

However the CSS still states:

background-image:url("./logo.png");

The result: the image doesn't display. Anybody run into this? How can this be resolved?

Answer 1

This should get you there every single time.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

Answer 2

WHAT I HAVE FOUND AFTER HOURS OF MUCKING WITH THIS:

WORKS :

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

The above outputs something like: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Notice the leading "/", and it's within quotes. Also note the scss extension and image_path helper in yourstylesheet.css.scss. The image is in the app/assets/images directory.

Doesn't work:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

doesn't work, invalid property:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

My last resort was going to be to put these in my public s3 bucket and load from there, but finally got something going.

Answer 3

In css

background: url("/assets/banner.jpg");

although the original path is /assets/images/banner.jpg, by convention you have to add just /assets/ in the url method

Answer 4

By default Rails 4 will not serve your assets. To enable this functionality you need to go into config/application.rb and add this line:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

Answer 5

In Rails 4, simply use

.hero { background-image: url("picture.jpg"); }

in your style.css file as long as the background image is tucked in app/assets/images.