在缩放时将背景图像和文本放在一起

Question

这是我的导航栏，由背景图像上的某些链接组成。我使用以下方式定位图像：

background-position: x% y%;

当我调整页面大小或缩放页面时，图像和链接的位置会发生变化。因此，链接会进入照片中的植被，而对比会使它们变得难以理解。那么，有没有办法将链接和图像分组或保持在一起，以便在我达到100％缩放时将它们保持在我用background-position: x% y%;声明的位置？

Answer 1

我想知道左边的植被从哪里开始，看起来大约是10％。然后有这样的事情：

.background {
  background-position: left center;
  background-size: 100% auto;
}
.text-wrapper { /*Some wrapper around the header and links, alternatively you could use something like h1, a:first-child */
  margin-left: 10%; /* the value of this being the % that the vegetation starts */
}