Asset helpers with inline CSS in Rails view

Question

I'm just adapting template code to a Rails web app.

I've got inline CSS referencing image assets like this:

  <div class="head" style="background-image: url('../somepath/b43.jpg');">

I'd like to store and reference images in the asset pipeline. I've used helpers like image_path before, but only in Sass files.

How do I write code that looks something like:

  <div class="head" style="background-image: url(image_path('b43.jpg'));">

that the inline CSS (using Rails asset helper) gets emitted with actual image asset folder paths when the page is rendered?

Right now, I'm just getting:

  <div class="head" style="background-image: url(image_path('b43.jpg'));">

in the HTML.

Eyeslandic · Accepted Answer · 2017-04-26 19:57:10Z

1

You must use inline erb style for this

<div class="head" 
     style="background-image: url(<%= image_path('b43.jpg') %>);">

answered Apr 26, 2017 at 19:57

Eyeslandic

14.9k13 gold badges44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel May Over a year ago

Thanks @Iceman. I did this and got: <div class="head" style="background-image: url:('/images/b32.jpg');">. I need to reference /assets/background/b32-somefingerprint.jpg. My other image_tag helpers in my ERB correctly reference the asset path (e.g. image_path "avatar1.jpg" yields /assets/avatars/avatar1-somefingerprint.jpg or image_path "b1.jpg" yields /assets/blog/b1.jpg). What am I missing?

Eyeslandic Over a year ago

Well, the asset helper should automatically reference the correct file.

Eyeslandic Over a year ago

You say you need /assets/background, if the image is in the background folder you'll need to do image_path('background/b32.jpg')

Collectives™ on Stack Overflow

Asset helpers with inline CSS in Rails view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related