如何使用 CSS 在 Rails 应用程序上设置背景图像答案

【问题标题】：How to set a background image on a Rails app using CSS如何使用 CSS 在 Rails 应用程序上设置背景图像
【发布时间】：2016-05-25 10:15:30
【问题描述】：

我正在构建一个 Rails 应用程序并尝试为欢迎页面设置背景图像。由于某种原因，图像不会显示，我不确定为什么。我在这里查看了很多问题，但我仍然无法解决。

这是我最新的代码 -

welcome.css.scss

body {
  background: url('/assets/mamaknowscollage.jpg');
}

我也尝试过（在许多其他变体中）-

body {
  background-image:  url('/assets/mamaknowscollage.jpg');
}

这是 html（这里的图像标签是用于徽标的）

welcome.html.erb -

<header>


</header>
<body>


            <image><%= link_to image_tag('MamaKnowsLogo.jpg'), root_path, id: "logo" %></image>

</body>

我保留了 url 路径，但我也尝试过没有资产，但它仍然不起作用。

任何想法我做错了什么？

【问题讨论】：

【解决方案1】：

如果文件在assets/images 文件夹中，那么就这样做

 background: image-url('mamaknowscollage.jpg');

【讨论】：

【解决方案2】：

您可以将welcome.css.scss 文件重命名为welcome.scss.erb 并尝试一下。（SCSS 可以工作！）

路径写成

background: url('<%= asset_path 'mamaknowscollage.jpg' %>');

图片文件应该放在assets/images中。

【讨论】：

我需要文件为 .scss，因为我正在使用引导程序。
好的！只需用 .erb 重命名您的 scss，即如果 welcome.css.scss - 将其重命名为 welcome.css.scss.erb，您的 scss 就可以工作了！
但这是否意味着我的所有样式文件都需要重命名才能用于样式目的？例如，我的页面上有一个正在运行的徽标，为什么我可以设置一个元素的样式但不能添加另一个元素？
还要检查图片的拼写是否正确（区分大小写）以及扩展名..
我猜你在 html.erb 而不是 scss 中把 logo 写成了 img 标签吧？

【解决方案3】：

body {
  background-image: url(mamaknowscollage.jpg);
}

为我工作！

【讨论】：

【解决方案4】：

只需添加一行：

*= require welcome

【讨论】：

我在欢迎页面上有一个可以设置样式的徽标，为什么我可以这样做但不能添加背景图片？我已经在上面添加了我的 html，我一定是做错了什么 - 它可能很明显，但我看不到它。
是的，我已经对其进行了修改并放置了它，将它加边框。一切正常。
然后检查stackoverflow.com/questions/18100650/…

【解决方案5】：

使用scss，您可以这样做：

body {
 background:url(asset-path('mamaknowscollage.jpg')) 0px 0px;
}

mamaknowscollage.jpg文件应该放在assets/images

关于这个问题，我认为你应该删除image标签。

<body>
  <%= link_to image_tag('MamaKnowsLogo.jpg'), root_path, id: "logo" %>
</body>

【讨论】：

【解决方案6】：

首先重命名你的css文件 welcome.css 到 welcome.scss 和 application.css 到 application.scss

在application.scss文件中添加@import 'welcome'

如果您的图片位于app/assets/images 文件夹中，请使用：

background: image-url("my_image.jpg");

如果您的图片位于app/assets/images/SomeFolder 文件夹中，请使用：

background: image-url("SomeFolder/my_image.jpg");

【讨论】：

【解决方案7】：

经过大量修改后，我通过在welcome.html.erb 文件的body 元素中添加“类”并应用适当的css 代码来解决此问题-

 body.background {
     background: url('mamaknowscollage.jpg');

  }

HTML -

 <body class="background">

     <div class="welcome">



         <%= image_tag('MamaKnowsLogo.jpg') %>

     </div>

 </body>

感谢所有做出贡献的人。

【讨论】：