我正在使用Rails 3.2，并且我必须为其中一个页面设置背景，并且我尝试了许多方法，但没有任何进展，因此寻求一些好的帮助。 我试过了
background: url(<%= asset_path 'background.jpg' %>)
background: url("public/background.jpg");
background-image:url('/assets/images/background.jpg')
没有任何效果。 请帮我。
猜你喜欢:
在您的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
对于Sass（scss），此代码适用于以下图像路径
app / assets / images / pictureTitle.png
body {
background-image: image-url('pictureTitle.png');
}
您可能还需要重新启动Rails服务器。
如果图像在公共目录中，例如public / bg.jpg
background-image: url('/bg.jpg')
如果您在app / assets / images / bg.jpg中有图片
background-image: url('/assets/bg.jpg')
如果您使用的是sass（scss），请使用image-url函数：
body {
background-image: image-url('texture.png'); // link to /assets/images/texture.png
}
我遵循了上面的建议（谢谢！）-以防万一它对其他人也不起作用-此解决方案对我有用：
.myClass {
background: image-url('myPicture.png');
}
因此，我必须在scss中使用“ background”代替“ background-image”。
这个问题可能比您想象的更加根深蒂固。 它很可能不是许多假定的Rails资产问题，而是html元素之间的“通信错误”。 原因如下：
首先，通过将背景图像放入
height: 100%元素来愚弄您的代码。height: 100%- 然后，检查您的开发者工具控制台，以查看图像是否正确加载或找不到404。
- 如果给出404，则说明您的CSS语法不正确，请尝试本文中的其他答案，直到不再获得404为止。对我而言，以上示例有效：
一旦您意识到控制台不再提供404信息，请确认该图像实际上已加载：
[http：// localhost：3000 / assets / pic-name.jpg]
- 我知道这可能因人而异，但是请尝试并确保已使用图片的名称。
- 如果加载良好，现在您知道了罪魁祸首-
height: 100%元素隐藏了某些东西-将图像放在nav中时，它可以工作，而将图像放在另一个元素中时，则不能工作。 这是诀窍； 在您想要背景图像的
height: 100%元素中，我的是nav，插入一些文本或某些行，是的，只是纯文本或其他内容！ 我的是：height: 100%a，它奏效了！ 尽管它没有显示完整图像，但只是上部。 但是至少我知道它有效。
- 而且，如果您添加更多文本，则图像会向下拉伸（显示更多）
希望这对某人有帮助。随之而来的是，我意识到放置背景图像以覆盖height: 100%也不是那么容易，尤其是使用引导程序时。 nav和您的其他元素都必须是相同的parent element的children，例如，我的是上面所示的header，并且还必须在您的homepage.html.erb和其他所有页面中渲染导航。 只是在application.html.erb上渲染它
更新资料
好的，这就是我要显示整个背景图像而无需在此处和此处插入文本的操作。 在您拥有CSS的height: 100%中，我只是添加了height属性，如下所示
body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;
height: 600px;}
N.B：使用height: 100%不起作用。
我为此整整挣扎了一天。 最后，我通过在保存背景图像的视图中对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
对于这个问题，有很多答案，我认为我会提出解决方案，以解决原始问题，因为他们最初尝试使用ERB帮助程序，其中包括：
遵循Kangkyu上面的链接，我知道可以将.erb文件扩展名添加到我的.css文件中。 Kangkyu绝对是这么做的。
application.css.erb
这使我可以访问辅助方法。
我没有费心找出图像的正确路径，而是使用了：
<%= asset_path "image_name.png" %>
所以我的CSS属性/值对如下所示：
background-image: url(<%= asset_path 'foo.jpg' %>);
试试下面的代码，它肯定会起作用：
.background-style {
background-image: url("../images/background.jpg");
}
好的，希望这对某人有帮助！ 我最近也遇到类似情况，希望为主题实现图像。如果您在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>
例如，如果您将图片放入app / assets / images中，并且其名称为“ zi-fullscreen-bg.png”那么你可以使用
.hero-unit.fullscreen-image-bg {
background-image: url('zi-fullscreen-bg.png');
}
至少对我有用！
似乎双引号有效。
这是我的示例：
body {
background-image: url("sunset");
}
日落jpeg位于我的资产文件夹中。
