使用空div中的图像作为背景,覆盖响应web应用程序中的整个区域

我看过很多类似的主题,但到目前为止还没有任何效果,它们不太适合我的需要。

最好的方法是使用两个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以响应并始终显示背景图像。

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

但我想确保屏幕保持灵敏,并根据大小进行调整,因此硬编码值没有意义。