在调整浏览器大小时将背景保留在文本后面

Question

我有一个问题。我试图将背景保留在导航元素的后面，但是当我通过保持宽度来调整屏幕高度的大小时，背景不够宽且最小化。这是我的代码：

.wrapper {
  width: 650px;
  height: 380px;
  border: 1px solid;
  overflow: scroll;
  resize: both;
  background-image: url(https://i.imgur.com/JpmUqE8.png);
  background-color: #ffffff;
  background-position: right top;
  background-size: cover;
}

.nav {
  float: right;
  color: #ffffff;
  margin-right: 70px;
  margin-top: 10px;
}

span {
  padding-right: 8px;
}

<div class="wrapper">
  <div class="placeholder"></div>
  <div class="nav">
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
  </div>
</div>

即使屏幕变小，有没有办法将背景保留在链接后面？可以在底部截取图像，但是可以保持链接的可见性，这一点很重要。如果这不可能，那么有人有其他想法吗？

更新

这是我的意思。如果图像可以容纳它的大小，那么问​​题将不再是问题：

Answer 1

使用导航作为背景的参考。请注意，我在裁剪左侧空间时使用了另一张图片：

.wrapper {
  width: 650px;
  height: 380px;
  border: 1px solid;
  overflow: scroll;
  resize: both;
}

.nav {
  float: right;
  color: #ffffff;
  margin-right: 70px;
  margin-top: 10px;
  height:100%;
  padding:0 60px;
  background-image: url(https://i.stack.imgur.com/9xhx6.png);
  background-color: #ffffff;
  background-position:  top;
  background-size: 100% auto;
  background-repeat:no-repeat;
}

span {
  padding-right: 8px;
}

<div class="wrapper">
  <div class="placeholder"></div>
  <div class="nav">
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
  </div>
</div>

Answer 2

您可以使用此代码

body {
  margin: 0;
}

.wrapper {
  width: 650px;
  height: 380px;
  border: 1px solid;
  overflow: scroll;
  resize: both;
  background-image: url("https://mk0brandloomtrca7pl1.kinstacdn.com/wp-content/uploads/2018/09/creative-website-designing-company-in-delhi-1999x1999.jpg");
  background-repeat: no-repeat;
  background-color: #fefefe;
  background-position: right top;
  background-size: contain;
}

.nav {
  float: right;
  color: #000;
  margin-right: 70px;
  margin-top: 10px;
}

span {
  padding-right: 8px;
}

<div class="wrapper">
  <div class="placeholder"></div>
  <div class="nav">
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
  </div>
</div>