Question

我做了一些谷歌搜索和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％的屏幕，我该如何解决？

Answer 1

如果图像在资产/ img中，则无需提供任何路径（例如，绝对，相对）

你也可以尝试这个

body {
background-image:url("myImage.jpg");
background-repeat: no-repeat;
background-size: cover;
}

Answer 2

那么你可以在体内添加一些css（与bootstrap无关）i.g：

body {
  background-image: url('../path');
  background-position: cover;}

因此：

https://jsfiddle.net/jxw31qtd/

或在整个屏幕上用（repeat-x和repeat-y）重复较小的背景：

https://jsfiddle.net/24219gj5/

如何在Rails上显示整页背景图片？

2 个答案:

你也可以尝试这个