使用图像作为空div中的背景，以覆盖响应式Web应用程序中的整个区域

Question

我见过许多与此类似的主题，但到目前为止还没有任何工作，并且它们不太符合我的需求。

我有一个响应式网络应用程序，预计将用于宽屏幕和最小的移动设备上。屏幕的一部分需要100％覆盖所有设备大小的图像（图像需要相应地调整大小），而另一个具有一些文本内容，按钮等。

解决这个问题的最佳方法是使用两个div，一个包含图像，另一个包含内容。像这样：

<div>
  <div class="left">
    <!-- Dont want to put anything here, just background img -->
  </div>
  <div class="right">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit....
    </p>
    <button>Do something</button>
  </div>
</div>

不幸的是我无法使用具有背景图像的div。我要么必须预设宽度和高度，要么我需要在div中内容，此时图像只覆盖内容。

所以，我的问题是如何填充div以便响应并始终显示该背景图像。

Here is the full code of what I already have

我明白我可以简单地设定班级的高度，我会有一些东西，基本上就是这样：

.left {
    float: left;
    background-image: url('https://static.pexels.com/photos/20787/pexels-photo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
background-attachment: auto;
    max-width: 100%;
    height: 1000px;
}

但我想确保屏幕保持响应并根据尺寸进行调整，因此对值进行硬编码是没有意义的。

编辑：根据要求，添加了一个模型，以防有人需要它。左边是一个更大的屏幕，如显示器，而右边是一个小的，移动设备的屏幕：

Answer 1

在.left div上使用CSS：

position: fixed;
width: 100vw;
height: 100vh;
z-index: -999;
top: 0;
left: 0;

并删除max-width。