Rails: 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?

Just FYI, Heroku has confirmed that it's a bug ... they are working on a solution — Nick ONeill, Mar 08 '13 at 23:29

score 408 · Accepted Answer · edited Jun 14 '17 at 19:02

408

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

edited Jun 14 '17 at 19:02

Sebastián Palma

32,692
6
40
59

answered Mar 23 '13 at 20:30

zeeraw

5,197
1
21
27

23

`asset-data-url` works for me after I changed my .css file to .css.scss file in a Rails 4 app. Thanks! – fatman13 Apr 15 '14 at 04:41
@fatman13 Yes, this only works with .scss and .sass files as far as I know. – zeeraw Apr 16 '14 at 16:55
Jeff: The others does work providing your asset url options are set up correctly. It doesn't apply for `asset-data-url` since it embeds the whole file inside the stylesheet. – zeeraw Mar 16 '15 at 12:29
1

Similar to @fatman13 since I was using `sass-rails` I finally ended up adding the file extension `.scss` to the offending .css file(s) so they all end in `.css.scss`, then replaced all instances of `url('blah.png')` with `url(asset-path('blah.png'))` (in my case all the blah.pngs were in a `/vendor`ed folder). – likethesky Oct 30 '15 at 22:32
`asset-url($asset)` should be used for sprockets 3, the version with `$asset-type` probably works with some older version – prusswan May 19 '16 at 06:09
Benefit to using `image-url` over `asset-url`? – Joshua Pinter Dec 20 '18 at 21:59

Yarin · Answer 2 · 2014-11-23T18:28:53.380

61

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

edited Nov 23 '14 at 18:28

answered Oct 07 '13 at 23:17

Yarin

173,523
149
402
512

2

works for me, really very good rails way solution. Thanks @Yarin – AMIC MING Feb 13 '14 at 06:53
1

Yes! After several hours of banging my head on the wall, your "asset-path" solution finally worked for me on my .css.scss file! `background-image: url(asset-path('off.png'))` – Raymond Gan Jul 05 '15 at 21:39
For those building with Rails 6, you don't need to install the `sass-rails` gem. The helpers work out of the box. – Promise Preston Aug 13 '20 at 21:25

score 37 · Answer 3 · answered Sep 24 '13 at 15:56

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

@MikeLyons: Just tested it on a brand new Rails 4.1 project and deployed to Heroku and it's working fine for me. You must have touched something on `production.rb`. — sergserg, May 19 '14 at 13:47

score 25 · Answer 4 · answered Mar 23 '13 at 20:55

25

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

answered Mar 23 '13 at 20:55

Mauro Dias

1,083
1
11
23

In your case what should be the file extension ? Only `.css` didn't work for me. – Arup Rakshit Jun 15 '15 at 16:14
Work for me! Thanks bro! – Julian Alejandro Sosa Aug 06 '18 at 16:46

score 11 · Answer 5 · answered Dec 19 '13 at 06:23

11

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

answered Dec 19 '13 at 06:23

user2458192

189
3
11

1

Using plain ol CSS, I thought I was going insane - thank you! – Craig McGuff Jun 20 '14 at 09:14
2

this will not get compiled in production – dimitry_n Jan 18 '17 at 03:47
Wow, thank you, that is not very intuitive. So I guess all assets in the asset paths (`vendor/assets`, `app/assets`, `lib/assets`, etc) get combined into a single assets folder after prepossessing is complete? – ohhh Nov 10 '17 at 10:38
This will not working in Production because in Production your assets get compiled with get a MD5 hash affixed to the end of the name and, with typical settings, `/assets/banner.jpg` will not work. Instead it'll be something like `/assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg`. **TL;DR Don't use this.** – Joshua Pinter Dec 20 '18 at 21:35

score 10 · Answer 6 · answered Jun 15 '15 at 16:26

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

score 5 · Answer 7 · answered Sep 24 '13 at 06:46

5

Only this snippet does not work for me:

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

But rename stylename.scss to stylename.css.scss helps me.

answered Sep 24 '13 at 06:46

s.vatagin

81
1
3

score 4 · Answer 8 · answered Sep 20 '13 at 19:18

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.

For anyone coming here and still having troubles: Ensure that your css file is updated and that you haven't precompiled your assets locally and forgot about updating them. — Hartwig, Sep 02 '14 at 10:06
Hartwig - what does that mean? Do you mean you have to run precompile again before this method will work? I've tried everything suggested on this post (everything) and nothing is working for me — Mel, Mar 28 '16 at 01:35

score 4 · Answer 9 · answered Jun 22 '14 at 00:45

4

Interestingly, if I use 'background-image', it does not work:

background-image: url('picture.png');

But just 'background', it does:

background: url('picture.png');

answered Jun 22 '14 at 00:45

AnderSon

71
4

but that only works from the scss file, not when placed in a style property assignment within a div... i'm confuse – AnderSon Jun 22 '14 at 00:59
`background: url('picture.png');` Works for Rails 7 – valk Mar 28 '23 at 20:30

score 4 · Answer 10 · answered Aug 05 '16 at 19:47

Referencing the Rails documents we see that there are a few ways to link to images from css. Just go to section 2.3.2.

First, make sure your css file has the .scss extension if it's a sass file.

Next, you can use the ruby method, which is really ugly:

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

Or you can use the specific form that is nicer:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

Lastly, you can use the general form:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

score 1 · Answer 11 · edited Jun 20 '20 at 09:12

1

In some cases the following can also be applier

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

Source: http://guides.rubyonrails.org/asset_pipeline.html

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 25 '15 at 06:42

Stephane Paquet

2,315
27
31

score 1 · Answer 12 · answered Mar 22 '17 at 05:12

1

You can add to your css .erb extension. Ej: style.css.erb

Then you can put:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

answered Mar 22 '17 at 05:12

Matias Seguel

788
11
17

score 1 · Answer 13 · answered Jun 28 '19 at 06:22

When using gem 'sass-rails', in Rails 5, bootstrap 4, the following worked for me,

in .scss file:

    background-image: url(asset_path("black_left_arrow.svg"));

in view file(e.g. .html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");

score 0 · Answer 14 · answered Mar 14 '14 at 13:50

0

This should get you there every single time.

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

answered Mar 14 '14 at 13:50

Joshua Nathaniel

76
4

score 0 · Answer 15 · answered Mar 31 '14 at 19:22

0

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

answered Mar 31 '14 at 19:22

ksiomelo

1,878
1
33
38

1

This works, but wouldn't this undo the benefits of precompiling the assets? – Arcolye Jan 19 '16 at 15:07

boussac · Answer 16 · 2015-06-20T23:04:07.697

0

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.

edited Jun 20 '15 at 23:04

answered Jun 20 '15 at 22:57

boussac

125
8

Read question full – Adriano Resende Mar 30 '16 at 20:23

score 0 · Answer 17 · edited Sep 13 '17 at 15:26

0

This worked for me:

background: #4C2516 url('imagename.png') repeat-y 0 0;

edited Sep 13 '17 at 15:26

Anwar

1,755
1
21
32

answered Aug 06 '16 at 21:54

Tolome

1
1

Rails: How to reference images in CSS within Rails 4

17 Answers17

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

Linked