我正在使用rails 3.2,我必须为其中一个页面设置背景,我尝试了很多方法,没有什么是正确的,所以寻找一些好的帮助。我试过了
background: url(<%= asset_path 'background.jpg' %>)
background: url("public/background.jpg");
background-image:url('/assets/images/background.jpg')
并没有任何效果。请帮帮我。
答案 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(scss),此代码使用以下图像路径
应用/资产/图像/ 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(scss),请使用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'。原因如下:
首先,通过将背景图像放在body
元素中来愚弄代码。
body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;} /* For a full size background image */
一旦您意识到控制台不再提供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
也不是那么容易,尤其是如果使用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位于我的资产文件夹中。