ROR：全屏幕背景圖片

我已經嘗試了不同的選項，也發佈在stackoverflow上。但似乎沒有任何工作。我在/ public/images中有logo.png文件，在樣式表中有一個custom.css文件。ROR：全屏幕背景圖片

我想每個頁面的背景被logo.png（全屏）

我試着搜索了很多後，以下。但我什麼也沒得到。背景只是空白。

請幫助而不是repeat-x

body{ 
background: url('../images/logo.png') repeat-x ; 
text-align:center; 
color:#fff; 
}

來源

2011-08-01 Wasi

如果您只是通過瀏覽器導航到圖像，您能看到圖像嗎？也許這是一個路線或權限問題。 – Mischa

試試'url（'/ images/logo.png'）'。 – RocketR

你肯定不希望使用重複-X 爲了說明爲什麼，使用下面的鏈接http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image和粘貼下面的代碼，看看會發生什麼，然後刪除重複-x和看到的結果

<html> 
<head> 
<style type="text/css"> 
body { 
    color: white; 
    background:url('paper.gif') repeat-x; 
} 
</style> 
</head> 

<body> 
<h1>Hellos World!</h1> 
</body> 

</html>

如果您的圖像在刪除repeat-x後不顯示，它很可能是路徑問題（如其他人已經指出的那樣）或錯誤的圖像。

唯一的另一件事是，如果在你的css中定義了其他類/ div，它們會覆蓋你在正文中設置的背景屬性。其他人建議你使用螢火蟲。我必須完全同意。處理HTML和CSS問題時，Firebug非常重要。

Firebug適用於Chrome和Firefox瀏覽器（Firefox作爲插件，默認爲Chrome），但我不確定其他瀏覽器。

來源

2011-08-01 08:29:00 jamesc

把repeat。除此之外，檢查圖像的路徑是否正確。

來源

2011-08-01 07:18:03

這也行不通。圖像文件位於/ public/images /中，而css文件位於public/stylesheets /中。所以我認爲路徑是正確的。 – Wasi

@Wasi yes應該是正確的路徑 –

你的CSS是否乾淨？這是你改變背景的唯一地方嗎？還要檢查HTML中是否沒有任何CSS硬編碼。或者最好，檢查螢火蟲顯示值。 –

路徑問題？ ^^

如果您只是導航到它，您能看到您的圖像嗎？如果不嘗試使用firebug來查看有什麼問題並輕鬆解決。

全屏幕的背景圖像：

我發現CSS-技巧的有趣article可能是有用的，筆者提供了一些解決方案。

來源

2011-08-01 08:09:53 Awea

有一個我用於全屏幕背景圖像的JQuery插件，它被稱爲bgStetcher。您可以使用它來拉伸背景圖像以填充屏幕。這樣的事情不能在CSS中完成。

來源

2011-08-01 08:17:45 desbest

ROR：全屏幕背景圖片

回答

相關問題