在空 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

我知道我可以简单地设置我的 class 的高度，我会有一些东西，所以基本上是这样的：

.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.

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

Using image as background in empty div to cover entire area in a responsive web app

html

css

background-image

media-queries

responsive-design