在 Bootstrap 行中添加背景图像答案

【问题标题】：Add background image in Bootstrap row在 Bootstrap 行中添加背景图像
【发布时间】：2016-05-25 16:12:04
【问题描述】：

我想在页面的这一部分插入全角背景图片。有人可以告诉我应该遵循哪个 CSS 规则吗？因为据我所知，您无法在一行内插入背景图像。谢谢

    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/profile.png" alt="">
                    <div class="intro-text">
                        <span class="name">HEADING</span>
                        <hr class="star-light">
                        <span class="skills">TEXT</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

【问题讨论】：

你想让标签图像作为标题和文本部分的背景吗？
我认为你需要的不是虚幻的：jsfiddle.net/yym7d1ov

标签： html css twitter-bootstrap

【解决方案1】：

你可以在你的css文件中设置background-image: url('img.png')属性来定义它。

更多选项请查看here。

【讨论】：

【解决方案2】：

当您想要添加背景图片时，<img> 不是要走的路。使用background-image 属性。

<header>
  <div class="container">
    <div class="row" 
         style="background:transparent url('img/profile.png') no-repeat center center /cover">
      <div class="col-lg-12">
        <div class="intro-text">
          <span class="name">HEADING</span>
          <hr class="star-light">
          <span class="skills">TEXT</span>
        </div>
      </div>
    </div>
  </div>
</header>

请注意，不建议添加内联样式，我在这里进行了演示。设置 div 样式的正确方法是向其添加特定的类或 ID，并在 CSS 文件中对其进行样式设置。

在上面的 sn-p 中，我使用了background 速记属性来设置background-image。此简写允许在单个声明中设置背景 color、image、repeat、origin、clip、position 和 size。您可以跳过其中任何一个，但size 必须以/ 为前缀，并紧跟在position 之后。

【讨论】：

也可以考虑background-size: cover;。
@walkerrandophsmith，Andrei 的解决方案包含 background-size 规则，但包含在速记版本中。