行Bootstrap有图象背景和专栏

Question

我有问题。我觉得这么简单，但我不明白正确的方法。

我的简单代码：

<div class="row">

<div class="col-sm-4">
      some text and 2 buttons
</div>

</div>

好吧，我想要一个响应的背景图像。在里面有一个带有一些文字和两个按钮的列（如图）

重要的是响应方式。

谢谢你的帮助！

Answer 1

如果您希望图像根据浏览器窗口的大小进行调整，请使用以下代码：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

请记住不要设置图像的高度和宽度。 有关详细信息，请查看此MDN文章。

Answer 2

使用

.row {
background-image: url('yourimage.jpg');
background-size: cover; /*That will make it responsive*/
}

Answer 3

我建议你这样使用。

{{1}}

Answer 4

使用此功能。

.row {
background: url('portfolio.jpg');
background-size: cover;
padding-bottom:10%;
}

Answer 5

这些都不适合我和我找到并尝试过的其他许多作品。我发现无法使div（行）响应与图像相同的大小。

我还发现我必须在图像（或div /行）上放置固定的高度，以使图像完全显示，然后变得敏感...然后在该行与图像之间留出空白以及它下面的下一行。

在大量寻找答案之后，我发现其他帖子清楚地表明，无法响应地调整背景图像的大小并将其调整到其高度所在的行，因为该图像会缩小，但在屏幕上保留了剩余空间行空白的高度。