Rails：如何从css在rails中设置背景图像？答案

【问题标题】：Rails: How to set a background image in rails from css?Rails：如何从css在rails中设置背景图像？
【发布时间】：2013-08-08 16:02:03
【问题描述】：

我使用的是 rails 3.2，我必须为其中一个页面设置背景，我尝试了很多方法，但都没有成功，所以寻求一些好的帮助。我试过了

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

background: url("public/background.jpg");

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

没有任何效果。请帮帮我。

【问题讨论】：

很惊讶没有人花时间对此进行投票，因为它已被浏览了 2236 次。 1+ 形成我。
background: url(<%= asset_path 'background.jpg' %>)为我工作guides.rubyonrails.org/asset_pipeline.html#css-and-erb

标签： css ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.2 background-image

【解决方案1】：

我在使用 rails 6 应用程序时遇到了这个挑战。

这是我修复它的方法：

对于位于app/assets/images/my-image.jpg的图片，假设是CSS背景图片，应该这样引用：

background-image: url(<%= /assets/my-image.jpg' %>)

对于位于app/assets/images/slides/my-slide.jpg的图片，假设是CSS背景图片，应该这样引用：

background-image: url(<%= asset_path 'slides/my-slide.jpg' %>)

注意：这在开发和生产环境中运行良好

您可以在官方 Rails 文档中了解更多信息：Coding Links to Assets

就是这样。

我希望这会有所帮助

【讨论】：

【解决方案2】：

[上下文] Ruby 2.6.3 |导轨 6.0.1 |使用 webpack 打包样式表。

我意识到我无法从 webpack 文件的 [s]css 中的资产管道传递图像：例如，来自 sass-rails 的资产助手不可用。

经过一番挣扎，我在https://stackoverflow.com/a/57175231/8131629找到了解决方案

【讨论】：

【解决方案3】：

试试下面的代码：

.background-style {
    background-image: url("../images/background.jpg");
}

【讨论】：

【解决方案4】：

这个问题有很多答案，我想我会提出解决原始问题的解决方案，因为他们最初试图使用 ERB 助手等：

在link from above from Kangkyu 之后，我了解到可以将 .erb 文件扩展名添加到我的 .css 文件中。这绝对是康奎所做的。

application.css.erb

这使我可以访问辅助方法。

我没有大惊小怪地找出图像的正确路径，而是使用：

<%= asset_path "image_name.png" %>

所以我的 CSS 属性/值对看起来像这样：

background-image: url(<%= asset_path 'foo.jpg' %>);

【讨论】：

【解决方案5】：

我为此苦苦挣扎了一整天。最后，我通过在包含背景图像的视图中编写 css 代码，让它在开发和生产中都能正常工作：

<head>
    <style>
        #tile {
            background: url(<%= asset_path 'background.jpg' %>);
            background-size: cover;
            }
    </style>        
</head>

然后在工作表本身上，我创建了一个 id=tile 的 div，如下所示：

<div id=tile>
  <div class=row>
  ...added more stuff
  </div>
</div>

Ruby 2.3.7 Rails 5.2.0

【讨论】：

【解决方案6】：

对于 sass (scss)，此代码适用于以下图像路径

app/assets/images/pictureTitle.png

body { 
  background-image: image-url('pictureTitle.png'); 
}

您可能还需要重新启动 Rails 服务器。

【讨论】：

【解决方案7】：

好的，希望这对某人有帮助！我最近遇到了类似的情况，希望为主题实现图像。如果您的 app/assets/images 文件夹中有一个名为 blog_image.jpeg 的图像，则此解决方案在 home_page_header.html.erb 文件中对我有用：

<!-- Page Header -->
<header class='masthead' style='background-image: url(assets/blog_image.jpeg)'>
  <div class='container'>
    <div class='row'>
      <div class='col-lg-8 col-md-10 mx-auto'>
        <div class='site-heading'>
          <h1>Omega</h1>
          <span class='subheading'>Sample text</span>
        </div>
      </div>
    </div>
  </div>
</header>

【讨论】：

这在开发中对我有用，但对生产无效。仍然没有弄清楚如何使它在生产中工作。

【解决方案8】：

这个问题可能比你想象的更加根深蒂固。这很可能不是许多人认为的 Rails 资产问题，而是您的 html 元素之间的'沟通不畅'。原因如下：

首先，通过将背景图像放在body 元素中来验证您的代码。

body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;}  /* For a full size background image */

然后检查您的开发人员工具控制台，查看图像是否正确加载或给出 404 未找到。
如果给出 404，那么您的 css 语法不正确，请尝试本文的任何其他答案，直到您不再获得 404。对我来说，上面的示例有效：
一旦您意识到控制台不再提供 404，请确认图像实际加载如下：

http://localhost:3000/assets/pic-name.jpg
- 我知道这可能因人而异，但请尝试并确保您使用了您的照片名称。
如果它加载良好，现在你知道罪魁祸首了 - body 元素隐藏了一些东西 - 当你将图像放在 body 中时，它可以工作，当你把它放在另一个元素中时，它就不行了。

这就是诀窍；在您想要背景图像的other 元素中，我的是header，插入一些文本或一些行，是的，只是纯文本或其他内容！我的是：

<header>
   <%= render 'shared/navbar' %> # To have the nav's backgrond as the image
   <div class="container">
      <div class="text-center">
        <h2><strong>Nairobi</strong></h2> <hr>
        <h2><strong>Is</strong></h2> <hr>
        <h2><strong>Just a Beula Land</strong></h2> <hr>
      </div>
  </div>

唉，它成功了！虽然它没有显示完整的图像，只是上半部分。但至少我知道它有效。
如果您添加更多文本，图像会向下拉伸（显示更多）

希望这对某人有所帮助。与此同时，我意识到放置背景图像来覆盖nav也不是那么容易，特别是如果使用引导程序； nav 和您的其他元素都必须是相同的 parent element 的 children，例如，我的是 header，如上所示，您还必须在您的内部渲染导航，例如，@ 987654334@ 和其他所有页面，而不是仅在 application.html.erb 上呈现它

更新

好的，这就是我在不在这里和那里插入文本的情况下显示完整背景图像的方法。在我的 application.scss 中，你有你的 css，我只是添加了 height 属性，就像这样

     body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;
height: 600px;}

注意：使用 height: 100% 不起作用。

【讨论】：

【解决方案9】：

似乎双引号有效。

这是我的例子：

body {
  background-image: url("sunset");
}

日落 jpeg 位于我的资产文件夹中。

【讨论】：

【解决方案10】：

在您的 CSS 中：

background-image: url(background.jpg);

或

background-image: url(/assets/background.jpg);

在environments/production.rb:

# Disable Rails's static asset server (Apache or nginx will already do this)  
config.serve_static_assets = false

# Compress JavaScripts and CSS  
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed  
config.assets.compile = false

# Generate digests for assets URLs  
config.assets.digest = true

【讨论】：

你在哪里添加你的css文件？
它在 assets/stylesheets/application.css 中
我必须在 application.rb 或环境文件中设置任何东西吗？
如果您的图像在公共图像文件夹中？请把它放在assets images 文件夹中
将 css 转换为 scss 可能会有所帮助并在 application.scss 中使用 @import 除此之外，将 url 更改为 assets-url、font-url 除了这些不需要更改。

【解决方案11】：

我遵循了上面的建议（谢谢！）——以防万一它也不适用于其他人——这个解决方案对我有用：

.myClass {
   background: image-url('myPicture.png');
}

所以我不得不在我的 scss 中使用“背景”而不是“背景图像”。

【讨论】：

【解决方案12】：

如果您将图像放入 app/assets/images 并且其名称为“zi-fullscreen-bg.png”，例如那么你可以使用

.hero-unit.fullscreen-image-bg {
  background-image: url('zi-fullscreen-bg.png');
}

至少它对我有用！

【讨论】：

【解决方案13】：

如果你使用的是 sass (scss)，请使用 image-url 函数：

body {
  background-image: image-url('texture.png'); // link to /assets/images/texture.png
}

【讨论】：

但是先生并没有，先生您认为问题是什么？

【解决方案14】：

如果您的公共目录中有图片，例如 public/bg.jpg

background-image: url('/bg.jpg')

如果你在 app/assets/images/bg.jpg 中有图片

 background-image: url('/assets/bg.jpg')

【讨论】：

似乎不起作用。如果我在 app/assets/images 中有我的图片怎么办？