html - 使用具有固定边框的背景图像覆盖 body

Question

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

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

这是我想要的布局的屏幕转储，使用 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

类似这样的吗？

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%;
}

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