在边界上的背景图像

Question

我身上有背景图片和边框。我现在看起来像这样（在jsbin上）：

但我希望背景图像保留在边框上，因此背景图像将完全可见。如何在背景上放置背景图片？

修改

期望的结果：

EDIT2
我已经使用了：之后和：之前@Danield提供并且它有效。我有4个角落，我把它们中的2个用于：之后和：之前（因此其中2个没有角落图像）。我正在寻找没有伪元素的另一种方式。也没有定位块元素与背景。我正试着用css实现。

Answer 1

添加绝对定位的伪元素。

body:after{
  content: '';
  display:block;
  background-image: url("https://www.gravatar.com/avatar/97adf5e1abeb6454d6c6a6a39b81265a?s=96&d=identicon&r=PG");
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 96px;
  height: 96px;
  position: absolute;
  z-index:1;
  top: 8px;
  left: 8px;
}

<强> Updated JsBin

Answer 2

尝试使用此CSS属性在边框上使用图像

  border-image: url(https://www.gravatar.com/avatar/97adf5e1abeb6454d6c6a6a39b81265a?s=96&d=identicon&r=PG) 25% repeat;