Rails 在CSS裡使用圖片

暴力法

反正最後都會被編譯在public下面，可以下rake assets:precompile指令，看看最後圖片被放到哪裡去了，通常都在public/asset底下，而網頁伺服器的根目錄是public/所以你的css就直接把圖片定位在/assets/底下，例如：

.your_class {
    background-image:url('/assets/your_img.png');
}

非常不建議用這個方法，程式碼非常不靈活

內嵌Ruby法

在Rails裡面，你的檔案想要內嵌Ruby，只要把檔名結尾加上.erb，就可以最常見的就是page.html.erb，但可沒這麼簡單唷，就連CSS檔以可以內嵌Ruby，一樣把你的CSS加上.erb，譬如style.css.erb，這樣CSS內就可以使用Ruby了。

既然可以使用Ruby了，那就大膽的把Rails內建的Helper拿出來用吧，asset_path("img.jpg")，就行了，例如:

.your_class {
    background-image:url('<%= asset_path("your_img.png") %>');
}

這樣至少靈活多了，至少你不用擔心Rails編譯之後，會把你的圖檔放到Public的哪裡去，被改了什麼檔名。

SCSS法

Rails預設使用SCSS，你打開你的Gemfile就可以看到了，預設已經有gem 'sass-rails'，在Rails的CSS裡面取圖，我推薦這個方法，因為這個方法程式碼最簡潔:

.your_class {
    background-image: image-url("your_img.jpg");
}

發生什麼事？沒錯使用SCSS的話，image-url("your_img.jpg");就行了，image-url是Rails的Helper，可別跟CSS原生的background-image:url(your_img.jpg);給搞混囉

.your_class {
    /* 這個是Rails的Helper */
    background-image: image-url("your_img.jpg"); 

    /* 這個是CSS的原生寫法 */
    background-image: url(your_img.jpg);
}

這兩種寫法要到的圖片可不一樣唷，Rails的Helper編譯後，會自動幫你安排圖片的路徑。而CSS原生的寫法，你就得自己編譯過後，自己去public/asset裡面找，你的圖跑到哪去了。