Rails: How to reference images in CSS within Rails 4

Question

Sprockets together with Sass has some nifty helpers you can use to get the job done. Sprockets will only process these helpers if your stylesheet file extensions are either .css.scss or .css.sass.

---

Image specific helper:

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

---

Agnostic helper:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

---

Or if you want to embed the image data in the css file:

background-image: asset-data-url("logo.png")

Don't know why, but only thing that worked for me was using asset_path instead of image_path, even though my images are under the assets/images/ directory:

Example:

app/assets/images/mypic.png

In Ruby:

asset_path('mypic.png')

In .scss:

url(asset-path('mypic.png'))

---

UPDATE:

Figured it out- turns out these asset helpers come from the sass-rails gem (which I had installed in my project).

In Rails 4, you can reference an image located in assets/images/ in your .SCSS files easily like this:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

---

When you launch the application in development mode (localhost:3000), you should see something like:

background-image: url("/assets/pretty-background-image.jpg");

In production mode, your assets will have the cache helper numbers:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

The hash is because the asset pipeline and server Optimize caching http://guides.rubyonrails.org/asset_pipeline.html

Try something like this:

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

Goodluck

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

None of the answers says about the way, when I'll have .css.erb extension, how to reference images. For me worked both in production and development as well :

2.3.1 CSS and ERB

The asset pipeline automatically evaluates ERB. This means if you add an erb extension to a CSS asset (for example, application.css.erb), then helpers like asset_path are available in your CSS rules:

.class { background-image: url(<%= asset_path 'image.png' %>) }

This writes the path to the particular asset being referenced. In this example, it would make sense to have an image in one of the asset load paths, such as app/assets/images/image.png, which would be referenced here. If this image is already available in public/assets as a fingerprinted file, then that path is referenced.

If you want to use a data URI - a method of embedding the image data directly into the CSS file - you can use the asset_data_uri helper.

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

This inserts a correctly-formatted data URI into the CSS source.

Note that the closing tag cannot be of the style -%>.