How to set a different background image for each p

2019-02-23 19:11发布

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;
    }

3条回答
我欲成王,谁敢阻挡
2楼-- · 2019-02-23 19:50

You can set the background-image property directly in your html like this:

<!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" style="background-image: url(<%=@page.background_image%>); ">
<div class="content">
    <%= yield %>
</div>
<%= render 'layouts/footer' %> 
</div>
</body>
</html>

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:

.page_one{background-image: url(your_first_image.jpg)}
.page_two{background-image: url(your_second_image.jpg)}
.
.

And in your html:

<div class="container <%=dynamically set here the class from you @page%>">
查看更多
Luminary・发光体
3楼-- · 2019-02-23 20:07

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.

查看更多
该账号已被封号
4楼-- · 2019-02-23 20:16

You can create a my_styles.scss.erb file and set a variable like that:

$body-background-color: <%= @page.body_background_color %>

Then you could use it in your scss files.

查看更多
登录 后发表回答