所以我一直在我的主页面添加背景图片，但背景图片永远不会加载。
application.scss文件：
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
max-width: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(background.jpg);
background-size: cover;
}
现在，添加相同的行背景：url（background.jpg）;对身体，将工作：
body {
color: #fff;
text-align: center;
text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
background: url(background.jpg);
}
所以这是有效的，但是当我将背景图像添加到#background标签时，它没有？为什么会这样？这是application.html.erb文件，我在其中调用#background id：
<!DOCTYPE html>
<html>
<head>
<title><%= @page_title %></title>
<%= csrf_meta_tags %>
<!-- Load in the stylesheet file 'application.scss' -->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- Load in the javascript file 'application.js' -->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div id="background"></div>
<!-- Alerts for devise -->
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert%></p>
<!-- Render the nav bar from the shared folder -->
<%= render "shared/application_nav"%>
<!-- Yield content -->
<%= yield %>
<!-- Render footer from the shared folder -->
<%= render "shared/footer"%>
<!-- Load in Gemfile for the Copyright Logo -->
<%= source_helper %>
</div>
</div>
</div>
</body>
</html>
将标签更改为底部并未改变任何内容。使用background-image，image-url，url（'background.jpg'）的变体;相反也没有帮助。
-webkit-transform等都是从#background id开始工作的。
任何想法会导致什么？
提前致谢！
1 - 大部分时间取决于你在<div>内的内容
2 - 除此之外，您可以将高度和宽度设置为100％
然后在你的（#background）下面添加这些行：
background-repeat: no-repeat;
background-attachment: fixed;
background-color:orange;
background-position: center center;
background-size: auto auto;
所以它变成：
#background {
position: fixed;
width: 100%;
height: 100%;
top:50%;
left:50%;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color:orange;
background-position: center center;
background-size: auto auto;
}
见：Example
当然你可以改变（背景颜色）值，因为你喜欢你的风格 如果你想根据你的
<div内容增加宽度，那么只需删除width: 100%; height: 100%;或将它们设置为你想要的任何大小。
您的语法没有问题但是您的除法是空的。如果您向该部门添加一些内容，则会显示背景图像， 或者给出图像的实际高度而不是auto。
所以似乎有一些bug正在发生。将id更改为类并将其重命名为像test123这样的乱码后，它终于奏效了。我已经加倍检查是否已经有一个id / class在我的scss文件中被称为后台（我使用bootstrap 4中的模板）但是没有找到任何内容。
无论如何，还是谢谢你的时间和建议！
编辑：实际上，问题如下：
#background{
}
工作良好，
#background {
}
不。注意第一个括号和背景之间的空格。我猜java / jquery gem正在搞乱我的scss或其他东西，但是删除空间最终完全修复了它。