如何在 Bootstrap 表单上放置背景图像？答案

【问题标题】：How to put a background image on a Bootstrap form?如何在 Bootstrap 表单上放置背景图像？
【发布时间】：2022-02-03 20:56:28
【问题描述】：

我正在尝试使用 Bootstrap 框架在我的表单上放置一个背景图片（比如在文本和输入后面，就像我的网站的背景图片一样），但图片出现在底部，我希望它在里面“容器”。

我的代码是这样的：

<div class="container">
    <div class="thumbnail">
        <form....>
            <fieldset>
            .
            .
            .
        </form>
        <img src="cs.jpg" class="img-responsive">
    </div>
<div>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您是否尝试过将该容器的背景图片设置为图片？即：

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

或者你可以内联：

<div class="container" style="background-image: url('cs.jpg');">
    ...
</div>

【讨论】：

它正在工作！，似乎我正在编辑引导程序的 CSS 样式表，只使用 .container{ back.... } 或放入
几乎解决了这个问题，现在的问题是图像看起来很可爱，它显示在缩略图 div 内，但看起来真的很好！
@GerardoTarragona 太棒了！（：顺便说一句，您可以通过单击左侧的复选标记来接受此答案。此外，如果您希望显示完整图像，则只需指定元素的宽度/高度即可。

【解决方案2】：

或者你可以这样尝试..

<body>
    <div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
        <p>...</p>
    </div>
    </div>
</body>

在 css 中是这样的：

.jumbotron {
    position: relative;
    background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/    
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

【讨论】：