与资产管道的背景图像

时间:2013-07-07 12:05:42

标签: ruby-on-rails sass asset-pipeline

这应该是一件简单的事情,但由于某种原因,它不会起作用。

我无法在页面上显示背景图片。我将Rails 3.2与资产管道一起使用。我试图在与主页控制器相关的页面上显示它。

图片位置为: app / assets / images / dna.jpg

home.css.scss

background: url('/assets/images/dna.jpg');

我还尝试过以下方法:

background: url('dna.jpg');
background: url('/assets/dna.jpg');
background-image: image-url("dna.jpg");
background-image:url(image_path('dna.jpg'));

无论我尝试哪种方法,我都会遇到同样的错误:

Sass::SyntaxError at /
Invalid CSS after "background:": expected pseudoclass or pseudoelement, was "   url('/assets/i..."

(在/Users/sean/Dropbox/bin/rails/assay/app/assets/stylesheets/home.css.scss中)

另见此SO帖子:Adding a background image in Ruby on Rails 2 in CSS

修改

参考这篇文章:sass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`

我清除了资产缓存

rake tmp:cache:clear

捆绑更新了我的 sass-rails gem。现在是3.2.6。 这些都没有任何区别。

3 个答案:

答案 0 :(得分:5)

我怀疑你的麻烦是一个非常简单的原因:缩进。 scss中的大部分时间都发生在语句后面没有空格的情况background:。在你的scss前缀文件中尝试这个:

background: url(dna.jpg);

它总是适合我。

答案 1 :(得分:1)

我找到了解决办法:将 scss 文件转换为普通的css文件。

<强> home.css

body {background-image:url('dna.jpg');
      background-size:cover;}

现在它运作正常。虽然它似乎不是正确的解决方案。

答案 2 :(得分:1)

我遇到了完全相同的问题,这是我在SCSS文件中使用Sass Indented Syntax的结果。

有关Sass和SCSS之间差异的更多信息:http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html