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;
}
You can set the background-image property directly in your html like this:
And you can set your background imagen directly from your @page variable or the way you want.
If you prefer, you can also set a different class for each page with a stylesheet like this:
And in your html:
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
And then all you have to do is set up @my_computed_image_path in the controllers in some kind of before_filter.
You can create a my_styles.scss.erb file and set a variable like that:
Then you could use it in your scss files.