Html 引导-响应背景图像，顶部有3列内容

我在Bootstrap3.3.6中实现设计模型时遇到困难

我附上了一张图片，从概念上展示了我正在尝试做的事情：

蓝色背景是一个图像。灰色区域是文本框（其中一个还包含表单），位于背景图像的“顶部”。整个事情都需要有反应

我从看和看开始

因此，我将图像（在上面的模型上用蓝色表示）添加到

.container fluid

中作为背景图像：

<div class="container-fluid" style="background-image: url('http://via.placeholder.com/1773x555');">

我还添加了一个

.content

类来设置灰色框的样式。这些都需要相同的尺寸，尽管我想下面的确切尺寸可以调整：

.content {
    background-color: #2C3582;
    min-height: 200px;
    width: 400px;
    padding: 10px;
}

我在这里为它摆好了小提琴。它没有按预期的那样工作。一些问题：

如何使背景图像的整个高度可见（即使

.container fluid

中没有足够的内容），并使其具有响应性

如何解决灰盒对齐的问题？我需要在它们之间留出一些空间，以便它们出现在模型中显示的位置。我不明白为什么底部2出现在小提琴上的位置

这是可能的，还是我应该告诉设计模型的人这是不可能的——特别是以一种能正确响应的方式？

我曾经试着制作像你照片中那样的容器

.container-fluid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.other-row {
    display: flex;
    justify-content: space-between;
    width:100%;
}

div .other-row:after,
div .other-row:before {
    display: none;
}

这里还有一把小提琴：

---

对于没有内容时显示的背景图像，您可以为

div

a

height

这非常好，这是我需要的一个很好的开始-谢谢。背景图像是一些人的（矩形，16:9样式）照片。您是否建议在转到mobile（

.sm

或

.xs

视口）时使用不同的图像，并在该断点处与媒体查询交换？我只是对解决这类问题的最佳方法感兴趣。您可以使用

位置：绝对

移动图像中的内容，然后给背景一个

高度

，使其可以显示。检查这把小提琴。但请确保您使用

@media

查询进行移动更改。其他选项是加载带有

img

标记的背景和图像，然后仅在移动视图中显示

img

标记。

.container-fluid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.other-row {
    display: flex;
    justify-content: space-between;
    width:100%;
}

div .other-row:after,
div .other-row:before {
    display: none;
}