如何在css中设置rails中的背景图像?

时间:2013-08-07 10:12:56

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

我正在使用rails 3.2,我必须为其中一个页面设置背景,我尝试了很多方法,没有什么是正确的,所以寻找一些好的帮助。我试过了

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

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

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

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

14 个答案:

答案 0 :(得分:35)

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

答案 1 :(得分:19)

对于sass(s​​css),此代码使用以下图像路径

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

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

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

答案 2 :(得分:10)

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

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

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

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

答案 3 :(得分:3)

如果您使用的是sass(s​​css),请使用image-url函数:

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

答案 4 :(得分:3)

我按照上面的建议(谢谢!) - 以防它对其他人不起作用 - 这个解决方案对我有用:

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

因此,我不得不在我的scss中使用“背景”代替“背景图像”。

答案 5 :(得分:2)

问题可能比你想象的更根深蒂固。它很可能不像许多人认为的那样是Rails资产问题,而是你的html元素之间的'miscommunication'。原因如下:

  1. 首先,通过将背景图像放在body元素中来愚弄代码。

    body {
    background: url('pic-name.jpg') no-repeat center center;
    background-size: cover;}  /* For a full size background image */
    
  2. 然后检查您的开发人员工具控制台,查看图片是否正确加载,或者是否找不到404。
  3. 如果给出404,那么你的css语法不正确,请尝试此帖子的任何其他答案,直到你不再获得404.对我来说,上面的例子有效:
  4. 一旦您意识到控制台不再提供404,请确认图像实际上已加载:

    http://localhost:3000/assets/pic-name.jpg

    • 我知道这可能因人而异,但请尝试并确保您已使用了您的照片名称。
  5. 如果它加载得很好,现在你知道罪魁祸首 - body元素隐藏了什么 - 当你把图像放在body中时,它可以工作,当你把它放在另一个元素中时,它工作没有。
  6. 这是诀窍;在那个你需要背景图片的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>
    

  7. 唉,它有效!虽然没有显示完整的图像,但只是上半部分。但至少我知道它有效。

  8. 如果您添加更多文字,图片会向下延伸(显示更多内容)
  9. 希望这有助于某人。 与此同时,我意识到放置背景图像以覆盖nav也不是那么容易,尤其是如果使用bootstrap; nav和您的其他元素都必须是同一children的{​​{1}},例如,我的parent element如上所示,您还需要渲染例如,header和其他所有页面中的导航,而不是仅在homepage.html.erb

    上呈现

    <强>更新

    好的,这就是我在没有插入文本的情况下显示完整的背景图像。在我的application.html.erb,你有css的地方,我只是添加了高度属性,就像这样

    application.scss

    N.B:使用 body { background: url('pic-name.jpg') no-repeat center center; background-size: cover; height: 600px;} 无效。

答案 6 :(得分:0)

尝试下面的代码,肯定会有效:

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

答案 7 :(得分:0)

好的,希望这有助于某人!我最近在类似的情况下寻求为主题实现图像。 这个解决方案适用于home_page_header.html.erb文件,前提是您的app / assets / images文件夹中有一个名为blog_image.jpeg的图像:

<!-- 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 :(得分:0)

我整整为此苦苦挣扎。最终,我通过在保存背景图像的视图中对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

答案 9 :(得分:0)

针对此问题的很多答案,使我想出了解决原始问题的解决方案,因为他们最初尝试使用ERB帮助器作为其他用途:

link from above from Kangkyu之后,我知道可以将.erb文件扩展名添加到我的.css文件中。 Kangkyu绝对是这么做的。

application.css.erb

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

我没有费心找出图像的正确路径,而是使用了:

<%= asset_path "image_name.png" %>

所以我的CSS属性/值对如下所示:

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

答案 10 :(得分:0)

Ruby 2.6.3 Rails 6.0.1也使用webpack处理样式表

我意识到我无法从webpack文件的[s] css中的资产管道中发送图像:例如,无法使用sass-rails的Asset Helpers。

经过一番努力,我找到了https://stackoverflow.com/a/57175231/8131629

上的解决方案

答案 11 :(得分:0)

在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

仅此而已。

我希望这会有所帮助

答案 12 :(得分:-1)

如果您将图片放入app / assets / images并且其名称为&#39; zi-fullscreen-bg.png&#39;,例如 然后你可以使用

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

至少它对我有用!

答案 13 :(得分:-1)

似乎双引号有效。

以下是我的例子:

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

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