如何在使用引导程序时将图像设置为容器的背景

Question

我正在尝试将图像（.jpg）设置为我的一半页面的背景，这是其中一个容器。我可以将背景设置为纯色，但是当我将其设置为图像时，某些东西不起作用并且它会变回白色。下面是我的CSS ..

.container {
background-image: url("background-image.jpg");
}

html很长，所以我会把它留下来。请注意，我正在使用bootstrap来响应地调整网页大小。谢谢！

Answer 1

您可以使用background-size属性并将其设置为contains，这会将图像放在包含该类的元素内。以下是https://jsfiddle.net/p9oak4b7/1/

的示例

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src=source here" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

编辑：

将此类添加到样式表中，并将其添加到容器中，这是一个包含容器流体的示例https://imgur.com/c9cmbNB

    .container {
   background-image: url("background-image.jpg");
   background-size: contain;
   }