我做了一些谷歌搜索和 SO -ing;结束于此Perfect Full Page Background Image article .我也试过在 jumbotron 上使用图像 here ，但我所做的一切都给了我相同的结果。我想这不是指令的错，而是我的代码中的某些东西阻碍了完整的图像。该应用程序是在 Rails 上完成的。我正在使用 bootstrap-sass gem。
这是它目前的样子(无论我在下面做什么，它看起来都像这样):http://imgur.com/0BR3BNd
如果你注意到，页眉和图像顶部之间有一个小的白色间隙，图像底部和页脚水平线之间有一个很大的间隙。我想让图像覆盖整个页面(100% 覆盖)，类似于 this或 this one .
这是 layouts/application.html.erb 的样子:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<p class="notice"><%= notice%></p>
<p class="alert"><%=alert%></p>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
我已经尝试过每一个(分别):
.jumbotron {
position: relative;
background: #000 url(../assets/my_image.jpg) center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
和
<img src="my_image/bg.jpg" id="bg" alt="">
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
我也尝试删除 application.scss 上的其他所有内容(保存上面的 jumbotron 代码)，但它仍然 看起来像屏幕截图图像。
页脚:
<footer class="footer">
<div class = "container">
<div class = "row">
(some text)
</div>
</div>
</footer>
标题:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<ul class="nav navbar-nav navbar-right">
(some text)
</ul>
</div>
</header>
为什么我的图片没有覆盖 100% 的屏幕，我该如何解决？
最佳答案
如果图像在 assets/img 中，则无需提供任何路径(例如绝对、相对)
你也可以试试这个
body {
background-image:url("myImage.jpg");
background-repeat: no-repeat;
background-size: cover;
}
关于css - 如何在 Rails 上显示整页背景图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39174696/