Using Ruby in CSS file

Question

I want to set the img as a background image, however, I am not sure how to do it. My code in HTML is specified as

Ideally I would love something like:

img {
    background-image: url(<%= image_tag @destination.image_url %>);
}

But I know it is not really possible. Any ideas how can I implement it?

Shouldn't img be div or any other element? Do you want to set a background image on an image? — 3limin4t0r
– 3limin4t0r, Commented May 18, 2020 at 10:27

Smek · Accepted Answer · 2020-05-18 07:17:18Z

Well your css.erb or scss.erb files are compiled to css in the end. So your inline erb would not work after compilation. I'm not sure if it could be configured to recompile on every request but I don't think it is ideal to do that because it would make your web pages very slow.

The image_tag helper is for creating an img tag to your html. So what you get now in your css is something like this:

img {
    background-image: url(<img src="path/to/image_url.jpg" >);
}

I don't think that's what you're after.

I think you should be able to add the img to your html instead of adding it in your css and then add some css to make it fill the wrapper.

<body>
<div class="wrapper">
<%= image_tag @destination.image_url, class: 'background-img' %>
</div>
</body>

.wrapper {
  width: 100%;
  height: 300px;
  position: relative;
}

.background-img {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
<img src="https://via.placeholder.com/300" class="background-img">
</div>

Please note that I have used a div tag instead of an img tag.

Another option is to add some inline css:

.wrapper {
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
}

<div class="wrapper" style="background-image: url(https://via.placeholder.com/300)"></div>

Collectives™ on Stack Overflow

Using Ruby in CSS file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related