Вопрос по css, ruby-on-rails-3, ruby-on-rails, background-image – Как установить разные фоновые изображения для каждой страницы на сайте Rails 3?

4

Я пытаюсь выяснить, как установить различное фоновое изображение для каждой страницы моего сайта Rails 3. Как я могу сделать это без необходимости повторять то, что у меня есть в моем файле CSS для каждой страницы?

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   ответа
3

что ты сможешь сделать это с помощью css. Даже с scss вы должны скомпилировать его в чистый css, прежде чем сможете его использовать, чтобы вы не могли изменить его на лету. Но вы можете опустить фоновое изображение из CSS и затем сделать

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

И тогда все, что вам нужно сделать, это установить @my_computed_image_path в контроллерах в своего рода before_filter.

0

Ты можешь создать My_styles.scss.erb file и установите такую переменную:

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

Тогда ты сможешь использовать его в своих файлах scss.

0

образом:

<!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(<%[email protected]_image%>); ">
<div class="content">
    <%= yield %>
</div>
<%= render 'layouts/footer' %> 
</div>
</body>
</html>

И вы можете установить фоновое изображение непосредственно из переменной @page или по своему усмотрению.

Если вы предпочитаете, вы также можете установить разные классы для каждой страницы с помощью таблицы стилей, например:

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

И в твоем html:

<div class="container <%=dynamically set here the class from you @page%>">

Похожие вопросы