• rambo
  • Coach Class
  • Offline
  • Registered: 2007-11-14
  • Posts: 96

Topic: Dynamically change css value

Ok, I have a website where there is a need to change the header background dynamically. I dont know how exactly am i going to do this. What im trying to do now is, in my css, for example;

#header{
background-image: url(/images/'#{some-header-picture}')
}

I know above code is not working. Just curious is there any way to do achieve this ?

  • Registered: 2007-05-17
  • Posts: 924

Re: Dynamically change css value

javascript

Johnson's Website

  • Neil
  • Mechanic
  • Offline
  • From: UK
  • Registered: 2007-04-01
  • Posts: 393

Re: Dynamically change css value

rambo wrote:

Ok, I have a website where there is a need to change the header background dynamically. I dont know how exactly am i going to do this. What im trying to do now is, in my css, for example;

#header{
background-image: url(/images/'#{some-header-picture}')
}

I know above code is not working. Just curious is there any way to do achieve this ?

Are you trying to show a different background image in your header depending on which part of the site the user is viewing? If so, you could do something like;

    <div id="header" class="<%= params[:controller] %>">
        # Your header contents
    </div>

...and your CSS would look like;

#header.users { background-image: url(/images/header_users.png) }
#header.songs { background-image: url(/images/header_songs.png) }
#header.artists { background-image: url(/images/header_artists.png) }

Neil's Website

  • rambo
  • Coach Class
  • Offline
  • Registered: 2007-11-14
  • Posts: 96

Re: Dynamically change css value

Thanks johnson, I was thinking of using javascript but Im next to zero when it comes to javascript. Neil, your solution looks great. But what about if user upload their own header ? it is like user can change the header. Looking forward to hear from you. Thanks in advance.

  • Neil
  • Mechanic
  • Offline
  • From: UK
  • Registered: 2007-04-01
  • Posts: 393

Re: Dynamically change css value

Being an inline-style, this could be considered hackish - but it could work;

<div id="header" style="background-image:url(/images/<%=h current_user.background_image %>);">
  # Your header contents
</div>

There might be another way with javascript or SASS, but I only use straight CSS at the moment - perhaps someone else could advise on that. And if you're doing anything more advanced than this with regards to customising the view via user preferences, you might want to start investigating templating systems such as Liquid.

Neil's Website

  • rambo
  • Coach Class
  • Offline
  • Registered: 2007-11-14
  • Posts: 96

Re: Dynamically change css value

Oo..this is something that I'm looking for. Thanks much Neil.

  • Registered: 2009-04-11
  • Posts: 35

Re: Dynamically change css value

Neil wrote:

Being an inline-style, this could be considered hackish - but it could work;

<div id="header" style="background-image:url(/images/<%=h current_user.background_image %>);">
  # Your header contents
</div>

There might be another way with javascript or SASS, but I only use straight CSS at the moment - perhaps someone else could advise on that. And if you're doing anything more advanced than this with regards to customising the view via user preferences, you might want to start investigating templating systems such as Liquid.

I rather go with putting all style (that need to be somewhat dynamic) in <style>-tags in the page header (under the css-links) and not in the code. 

<style>
   #header {
          background-image: url(/images/<%=h current_user.background_image %>);
     }
</style>

Last edited by AndreasE (2009-06-25 13:42:36)

  • Registered: 2012-05-16
  • Posts: 1

Re: Dynamically change css value

<style>
   #header {
          background-image: url(/images/<%=h current_user.background_image %>);
     }
</style>


This works perfectly for me. Thanks for the reply.