2016-09-15 101 views
2

我正在運行ruby 2.3.0和導軌5.0。當試圖在一個視圖中顯示的背景圖像,我用下面的CSS類:如何在導軌上顯示紅寶石背景圖像

.header_img{ 
    width:100%; 
    height: 400px; 
    background: url("../../assets/images/home/home-header.jpg"); 
} 

圖像位於下的主文件夾資產配方食品中。我試圖在這裏找到一個解決方案,但一直沒能找到一個工作任何幫助將是真棒。

我正在使用Rubymine作爲我的IDE,似乎沒有任何工作。

回答

1

無需提供絕對路徑爲你的形象是在資產產生這樣你就可以直接做這樣的事情

background-image: url('image.png') 
+0

這對我不起作用。它所做的就是在代碼中給我這個background-image:url('image.png') –

+0

可以請你試試像這樣background-image:url(「../../ assets/images/home/home- header.jpg「)通過給絕對路徑 –

+0

這並不起作用 –

0

你應該看一看資產管道,請參閱「2.3.1 CSS和ERB「:

http://guides.rubyonrails.org/asset_pipeline.html

資產管道自動評估ERB。這意味着如果你添加 的ERB擴展到CSS的資產(例如,application.css.erb), 然後像asset_path助手在你的CSS規則可供選擇:

.class { background-image: url(<%= asset_path 'image.png' %>) } 
+0

我的IDE說找不到asset_path –

+0

@JohnBome您是否將css重命名爲css.erb?如果您運行該應用程序,css的外觀如何。 (檢查來源)? – Roger

0

您可以使用IMAGE_URL幫手而無需將該文件重命名爲.erb。你只需要添加擴展名.scss。例如。 main.css.scss並添加一行:

background-image: image_url('/home/image.png')

+0

我有home.scss和助手不工作 –

1

我有一個類似文件夾結構,你,我已經成功地使用背景圖片。

有這樣的代碼的嘗試,而不是看它是否工作

background-image:url('/assets/home/home-header.jpg'); 

也只需額外的,如果你想有一個固定的,不重複的背景覆蓋圖像的整個頁面下方添加這個CSS ^該行

background-size:cover; 
background-repeat:no-repeat; 
background-attachment:fixed; 
height:100%; 
+0

我仍然沒有太多運氣。我使用紅寶石作爲我的IDE,我得到無法解析文件。 –