Bootstrap 中的巨型封面照片（全宽、全高）答案

【问题标题】：Giant cover photo (full width, full height) in BootstrapBootstrap 中的巨型封面照片（全宽、全高）
【发布时间】：2013-09-21 18:01:14
【问题描述】：

我正在运行 Bootstrap 2.3 和 Wordpress，我的目标是制作一张与此类似的巨型封面图片：http://www.platetheslate.com/（仅在顶部带有我的导航栏。）下面的文章。

我正在尝试通过我的头文件来实现它，最上面的代码是这样的：

<style> 
.cut img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
} 
</style> 

<div class="cut">
    <img src="">
</div>

但它并没有达到类似的效果，并且在菜单栏和封面图片之间留下了相当大的间隙。我对此有点陌生，但很想把它记下来。如果有更好的方法来解决这个问题或任何事情，我会全力以赴。或者眼睛。谢谢！

【问题讨论】：

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

<html>
<head>
<style>

   html { 
      background: url(your-image.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
</style>
</head>
<body>
</body>
</html>

您也可以尝试 jquery 解决方案： http://srobbin.com/jquery-plugins/backstretch/

【讨论】：

非常感谢。我觉得我应该知道这一点，但是，我该如何实现呢？这是我的代码在头文件顶部的样子：<style> .cut img { background: url() no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <div class="cut"> </div> - 但我的页面上没有显示任何内容。
好的，我更新了它，但是它把它推到了后台，并且由于某种原因没有完全加载图片。我试图让它像上面链接的示例一样，所以它有点推动图片下方的所有其他内容（如文章），除了导航栏。
好的，我发现它正在完全加载背景，但它被卡在所有前景内容的后面，而不是把所有东西都推到它下面。知道如何在 Bootstrap 中做到这一点吗？

【解决方案2】：

如果你包含 Jason B codeld，这就是你的代码应该是什么样子

<style> 
   html { 
      background: url(your-image.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
.cut img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
} 
</style> 

<div class="cut">
    <img src="">
</div>

【讨论】：

我这样做了，但它没有完全加载背景，它正在加载同一张图片的 2 张（同样的问题是顶部的图片在其自身和导航栏之间留下了空隙.)
好的，我发现它正在完全加载背景，但它被卡在所有前景内容的后面，而不是把所有东西都推到它下面。知道如何在 Bootstrap 中做到这一点吗？