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

Question

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

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

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

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

没有任何效果。请帮我。

score 44 · Accepted Answer

在您的 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

score 29 · Accepted Answer

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

应用程序/资产/图像/pictureTitle.png

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

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

score 10 · Accepted Answer

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

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

如果您在 app/assets/images/bg.jpg 中有图像

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

score 3 · Accepted Answer

这个问题可能比你想象的更根深蒂固。这很可能不是许多人认为的 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，尤其是如果使用引导程序；thenav和您的其他元素都需要children相同parent element，例如，我的元素header如上所示，并且您还必须在您的 navhomepage.html.erb和其他所有页面中呈现导航，而不是仅在其上呈现这application.html.erb

更新

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

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

注意：使用height: 100%无效。

score 3 · Accepted Answer

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

按照Kangkyu 上面的链接，我了解到可以将 .erb 文件扩展名添加到我的 .css 文件中。这绝对是康奎所做的。

应用程序.css.erb

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

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

<%= asset_path "image_name.png" %>

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

我为此挣扎了一整天。最后，我通过在包含背景图像的视图中编码 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>

红宝石 2.3.7 轨道 5.2.0

score 1 · Accepted Answer

在使用 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 文档中阅读更多相关信息：编码链接到资产

就这样。

我希望这有帮助

score 0 · Accepted Answer

好的，希望这对某人有帮助！我最近遇到了类似的情况，希望为主题实现图像。如果您的 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>

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

使用 Bootstrap CSS 添加背景图像 Ruby on Rails 应用程序

这很简单，而且确实如此。虽然我花了半个小时在互联网上搜索并使用代码来让它工作。许多网站显示了要编写的代码，但没有显示代码的放置位置。这是我所做的，使用 Rails 4 和 Bootstrap 3。你可以复制它......

示例代码-1

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

示例代码-2

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

背景图片：图片网址（“new.jpg”）；

score -1 · Accepted Answer

试试下面的代码：

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

score -2 · Accepted Answer

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

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

至少它对我有用！

score -2 · Accepted Answer

双引号似乎有效。

这是我的例子：

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

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

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

15 回答 15

Related

Reference