我的背景图片没有完全展开或显示为全尺寸。 html部分中的背景图片有问题答案

【问题标题】：My background image doesn't expand fully or show up for the full size. Trouble with background image in html section我的背景图片没有完全展开或显示为全尺寸。 html部分中的背景图片有问题
【发布时间】：2019-05-04 09:03:57
【问题描述】：

我正在开发 Bootstrap，我对前端还很陌生。我没有 CSS 文件，我只有一个包含在我的 python django 项目中的 html 文件。在这个文件中，我试图从我的部分放置一个背景图像。

此图片未完全显示或未展开至完整尺寸。我不确定如何使其包含图像的响应式背景部分，并且我不确定如何确保该部分至少扩展到完整大小或页面大小。你能帮忙吗？

无论我尝试查找在线显示为 CSS 的内容，我现在都不想包含 css。只是想用 boostrap html 文件保持简单。这是下面的代码。

<section class="jumbotron text-center" style="background:transparent url({%static 'workspace.jpg'%}) no-repeat center center /cover">
    <div class="container">`enter code here`
            <h1 class="jumbotron-heading">Name heading</h1>
            <p class="lead font-weight-bold text-muted">Test 2</p>
            <p>
            <a href="mailto:test@gmail.com" class="btn btn-info my-2">Email</a>
            </p>
      </div>
</section>

【问题讨论】：

背景尺寸：封面；和背景位置：中心；背景重复：不重复；
你能告诉我如何在上面的代码中包含这个。
你可以像这样添加这个代码样式标签我建议你在你的部分添加一个特定的调用，样式只会影响特定的 div。

标签： python html css bootstrap-4

【解决方案1】：

要使用内联 CSS 将背景图像添加到容器中，您可以这样做：

注意*：确保删除 border: 1px solid red;。这只是为了演示。

<div class="container" style="border: 1px solid red; background-image: url('https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1'); background-size: 100% 100%; background-repeat: no-repeat;">
  
     <p style="padding: 100px;">content</p>

</div>

【讨论】：

@zack 不用担心，朋友很乐意提供帮助！

【解决方案2】：

您可以在样式标签中添加此代码，例如<style>.jumbotron .text-center{background-size:cover; background-repeat:no-repeat; background-position:center;}</style>我建议您向您的部分添加一个特定的调用，该样式只会影响特定的 div。

如果你想添加内联，像这样style="background-image:url(img);background-size:cover; background-repeat:no-repeat; background-position:center; "

【讨论】：