Passing ruby tag in CSS

Question

I want to change my application back ground dynamically.For that background image, i'm saving the image in DB with only one row,if i upload new background image it will update the DB first row and it will affect background as well.

here is my view code

<%=ChangeBackdrops.first.media.url%>

here is my css

body {
  background-image: url(/../../../images/back.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:fixed;
  -o-background-size: 100% 100%, auto;
  -moz-background-size: 100% 100%, auto;
  -webkit-background-size: 100% 100%, auto;
  background-size: 100% 100%, auto;
}

How can I pass my ruby tag in that CSS? That means like this?

background-image: url(<%=ChangeBackdrops.first.media.url%>)

oldhomemovie · Accepted Answer · 2012-05-23T08:14:36.700

1

The simplest way you can achieve that is just placing the code inside the style tag while rendering the view. Try writing the following code inside the application.html.erb (for example):

<head>
  ...
  <link rel="stylesheet" ... /> <!-- load your common stylesheet --!>
  <!-- and now override the background-image --!>
  <style>
    body {
      background-image: url("#{ChangeBackdrops.first.media.url}");
    }
  </style>
</head>

edited May 23 '12 at 08:14

answered May 23 '12 at 08:09

oldhomemovie

14,621
13
64
99

i loaded like this. Is this correct? For this not working. – Rukmangathan Govindarajan May 23 '12 at 12:51
What returned value of `ChangeBackdrops.first.media.url` looks like? – oldhomemovie May 23 '12 at 13:11
1

Thats working,but i dont want the style tag inside the application.html.erb. – Rukmangathan Govindarajan Jun 25 '12 at 10:29
@Ruk I am in the same situation. Though I didn't think I wanted a stylesheet tag in the `html.erb` file, I think now it's needed: since it is runtime, there is no caching typical to precompiled assets; and sending another CSS file would just slow down the page render time by adding more files to load. just put all your in-page styles in a sane place. – New Alexandria Apr 19 '13 at 18:42

score 0 · Answer 2 · answered May 23 '12 at 07:55

0

What rails version do you use? Do you use Asset Pipeline? In that case you can just add erb extension to your css file and use your suggested line <%=ChangeBackdrops.first.media.url%>. You may want to check this guide, the 'preprocessing' part of it

answered May 23 '12 at 07:55

m.silenus

492
7
15

More elaborate answer along the same lines: http://stackoverflow.com/questions/1338173/possible-to-use-stylesheet-css-erb-in-rails/10075329#10075329 – froderik May 23 '12 at 09:50
1

My image name is dynamic.not a constant (single)name. – Rukmangathan Govindarajan May 23 '12 at 12:53

Passing ruby tag in CSS

2 Answers2