背景图像不在Ruby on Rails应用程序上呈现

我试图在一个div的背景中使用类head进行图像渲染。

我的application 视图是用Haml编写的，正文定义如下：

 %body .container .head .sixteen_columns .top-nav

我的application 样式表中包含：

 .head { background-image: url(/images/background_image.jpg); width: 100%; height: auto; }

我已经尝试了许多变体来指定图像的路径并多次更改图像名称但无济于事。

有什么问题？

在样式表中引用图像时，请考虑使用asset_path帮助程序。文档可以在这里找到（查看2.2.1 ）在您列出的CSS中，您将会发生升级

 .head { background-image:url(<%= asset_path 'background_image.jpg'%>); width:100%; height:auto; }

注意：这要求您的样式表是一个erb。

这样做比明确说明路径提供了许多优点，其中之一是当rails应用程序的结构随新版本发布而更改时，您不需要更改代码中的任何内容以便正确引用该图像。

这可能看起来有点过分仅仅是为了引用一个图像，但它是Rails的许多惯例之一，难以使用但很棒！随着您的应用程序的发展和变化，希望能够让它更好地经受住时间的考验。

假设您正在使用Rails 3.1或更高版本，并且您正在为图像正确使用资产管道，则可以通过执行以下操作来包含图像文件：

 .head { background-image: url(/assets/background_image.jpg); width: 100%; height: auto; }

这是因为资产管道的运作方式。它在运行时编译您的资产，并将您的所有资产放在名为/assets/的文件夹中。它也忽略了子文件夹结构，它只是将所有内容转储到root /assets/文件夹中，而不是/assets/subfolder/ 。

试试跑步

 rails -v

从控制台确认你所使用的Rails版本。

听起来你正在运行rails 2.x应用程序，对吗？这应该意味着你从/ public目录提供图像，js等。让我在css中设置背景图像的一个重要问题是，您指定的路径是相对于样式表所在的目录（例如/ public / stylesheets），而不是项目本身的根目录。

您是否尝试更改路径以从样式表所在的目录上移动？

 .head { background-image: url(../images/background_image.jpg); width: 100%; height: auto; }

编辑：您尝试过哪些其他路径到bg图像？

其他一些可能性可能是：

  background-image: url(images/background_image.jpg); background-image: url('../images/background_image.jpg');

另一件需要检查的事情是加载视图并使用检查器检查Google Chrome中的div（Ctrl Shift + I）。选择div并检查Chrome分配给它的样式。

另外，仔细检查它仍然被命名为background_image.jpg不能告诉你我被忽略的一些拼写错误烧了多少次;）

解：

事实certificate这是两件事的结合。我用这种格式作为背景图片：

 background-image: url(../images/background_image.jpg);

但是， .head div的height为0 。我添加了一个固定的高度进行测试，这一切都完美展现出来。我可以从这里开始使用它。

非常感谢大家的帮助!!

在rails 4中，您现在可以使用css和sass helper image-url：

 div.logo {background-image: image-url("logo.png");}

如果您的背景图像没有显示，请考虑查看您在css文件中引用它们的方式。