This works perfectly for me. Thanks for the reply.

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>

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

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>

#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) }

#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 ?