使用带有固定边框的背景图像覆盖身体

Question

我有一个小项目，但它给我带来了很多麻烦......

如何使图像和白色边框覆盖视口，边框始终相等？

这是我想要的布局的screendump，用Photoshop创建。

到目前为止我尝试过的CSS。

body {
    background-repeat: no-repeat;
    background-position: center center fixed;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(../img/bg_border.jpg);
}

如果您有任何线索，任何帮助将不胜感激！谢谢！

Answer 1

这样的东西？

＆＃13;

＆＃13;

html, body {
  margin: 0; padding: 0; height: 100%;
}
.wrapper {
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center center fixed;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(http://lorempixel.com/output/nature-q-c-1000-600-1.jpg);
    border: 50px solid white;
    height: 100%;
}

＆＃13;

<div class="wrapper"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您好，您需要将内容包装到.wrapper以及内部cover的背景图片中。

您的身高：http://codepen.io/SzymonDziewonski/pen/RWZzGq

且流体全屏高度：http://codepen.io/SzymonDziewonski/pen/jbLjVb

有很多方法可以做到这一点 - 这只是其中两个

编辑我的错误 - 社区是对的

因此，作为兑换，我在这里给代码片段。 我们每天都像往常一样学习。

第一个解决方案：，包装容器的高度

body{
  padding: 40px;
}
.wrapper{
  background-color: red;
  width: 100%;
  height: 400px;
  position: relative;
  background-image: url("http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
}

<div class="wrapper"></div>

第二个解决方案：包装容器的流体高度

*{
  padding: 0;
  margin: 0;
}
body{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper{
  background-color: red;
  position: absolute;
  top: 40px;
  left:40px;
  bottom: 40px;
  right: 40px;
  background-image: url("http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
}

<div class="wrapper"></div>