How do I set a different background image for each page in the Rails 3 site?

advertisements

I'm trying to figure out how to set a different background image for each page of my Rails 3 site. How can I accomplish this without having to repeat what I have in my css file for each page?

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Site title</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
<div class="container">
<div class="content">
    <%= yield %>
</div>
<%= render 'layouts/footer' %>
</div>
</body>
</html>

pages.css.scss

.container {
    width: 800px;
    height: 640px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -320px;
    margin-left: -400px;
    background-image: url(amber1.jpg);
    background-repeat: no-repeat;
    background-color: black;
    font-family: times new roman, serif;
    text-align: center;
    }


I don't think you can do this using css. Even with scss, you must compile it to pure css before you can use it, so you can't change it on the fly. But you can omit the background image from the css and then do

<div class="container" style="background: url(<%= @my_computed_image_path %>)">
</div>

And then all you have to do is set up @my_computed_image_path in the controllers in some kind of before_filter.