我做了一些谷歌上搜索和SO -ing; 在这篇完美的整页背景图像文章中做总结。我也尝试过像这里所说的在巨无霸上使用图像，但是我所做的一切都给了我相同的结果。我认为这不是指令的错误，但是我的代码中的某些因素妨碍了完整图像。该应用程序已在Rails上完成。我在用bootstrap-sass宝石。
这是当前的外观（无论我在下面做什么，都看起来完全一样）：http : //imgur.com/0BR3BNd
如果您注意到，在页眉和图像顶部之间有一个小的白色间隙，在图像底部与页脚的水平线之间有一个较大的间隙。我想使图像覆盖整个页面（100％覆盖），像这样或这样一个。
这是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％的屏幕，如何解决？
好吧，您可以在正文中添加一些CSS（与引导程序无关）ig：
body {
background-image: url('../path');
background-position: cover;}
因此：
https://jsfiddle.net/jxw31qtd/
或使用（repeat-x和repeat-y）在整个屏幕上重复较小的背景，例如：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句