2015-04-26 16 views
0

我想爲我的應用程序的主頁和物品的索引視圖設置兩個不同的背景圖像。 我直接在主頁視圖試過這樣:Rails 4家庭和物品索引視圖的不同背景圖像

<div class="container" style="background: url('/assets/images/hom.jpg')"> 

,但它不顯示任何圖像。有人可以幫助我嗎? 我已經試圖按照這篇文章,但它仍然無法正常工作。 How to set a different background image for each page in Rails 3 site?

+0

「hom.jpg」是否可能不是資產的正確名稱? –

回答

0

嘗試沒有/資產/在URL中。導軌資產管道不要求你說明它是在/資產/目錄

0

您可以通過設置此時,相應的CSS類和設置圖像背景中您樣式表實現這一目標。喜歡的東西:

<div class="container home"> 

而且在SCSS文件:

.container.home{ 
    background-image: image-url("hom.jpg"); 
} 

記住image-url是應該在.scss文件中使用的輔助工具。要做到這一點

0

一種方法是在你的佈局將控制器和動作名稱到body標籤。然後,您可以依靠純CSS來提供不同的圖像。在您的佈局文件,你可以這樣做:

<%= content_tag :body, class: "#{controller_name}-#{action_name}" do %> 
    <!-- Your layout content, or everything that should be in the body tag goes here --> 
<% end %> 

這會給你下面的HTML:

<body class="items-index> <!-- or whatever the current controller/action are --> 

然後,您可以添加相關的CSS。

.items-index { 
    background-image: image-url("items_index.jpg"); 
} 
.pages-home { 
    background-image: image-url("pages_home.jpg"); 
} 

你可以把它包裝在一個幫手裏,使它更清潔。

def class_for_body 
    "#{controller_name}-#{action_name}" 
end 

甚至:

def body_tag(&block) 
    content_tag :body, yield, class: "#{controller_name}-#{action_name}" 
end 

見的Rails提供controller_nameaction_name方法。

+0

我嘗試在我的/app/views/layouts/application.html.erb中添加<%= content_tag:body,class:「#{controller_name} - #{action_name}」%>,並且指定了我的背景圖像CSS,但我得到的是我頁面左上角的{:class =>「welcome-index」},我無法理解我失敗的位置 – Alfredo

+0

這是因爲erb標籤缺少'do'。我更新了我的答案。 'content_tag'需要內容,並且需要一個塊。您正在傳遞'class:「#{controller_name} - #{action_name}」'作爲該內容,因此您會得到格式不正確的標記。我會更新我的答案。注意'do'和'<% end %>'。 – Mohamad

0

我在網頁試過這樣:

<div style="background-image: url('/assets/hom.jpg')"> 

而且似乎在本地工作,但在Heroku上推後,不會在網上顯示的圖像。 此外,圖像顯示剪切,因爲被稱爲DIV,並且我希望它引用到我的頁面的主體。