【问题标题】：Boostrap background image引导背景图像
【发布时间】：2017-06-09 00:14:58
【问题描述】：

请问我如何获得一个名为 bgImage 的正确引导背景图像。目前，我的背景不适合调整窗口大小时的大小。

<html>
    <head>
        <link href="css/style.css"  rel="stylesheet">
    </head>
    <body>
        <div id="BGImage">
            <div class="container" id="tabcontainer">
                <div class="row">   
                //All the content i.e text field, text box are inside
                </div>      
            </div>
        </div>
    </body>
</html>

style.css

<body>
  background: none;
</body>
#BGImage {  
  background: url(../images/1.jpg) no-repeat scroll 0 0 transparent;    
  background-repeat:no-repeat;  
  -webkit-background-size:cover;    
  -moz-background-size:cover;   
  -o-background-size:cover;
  background-size:cover;
  background-position:center;   
  height:850px;
}

【问题讨论】：

可能重复：How to use responsive background image in css3 in bootstrap

标签： html css twitter-bootstrap

【解决方案1】：

试试这个把你的背景尺寸改成这个，

#BGImage {  
  background-size:100% auto;
}

【讨论】：

嗨，这行得通:)。但是，当我调整它的大小时，中间还有一些空间。有什么办法可以去掉空格？
如果它在顶部，那可能是因为您添加了边距。

【解决方案2】：

这可能不是问题的直接答案，因为它试图将您的样式内联。到目前为止它工作正常

这是我用来实现的简单代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css\bootstrap.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
      #BGImage {
        background: url('image/1.jpg') no-repeat scroll 0 0 transparent;
          background-repeat:no-repeat;
          -webkit-background-size:cover;
          -moz-background-size:cover;
          -o-background-size:cover;
          background-size:cover;
          background-position:center;
          height:850px;
      }
    </style>
    <script type="text/javascript" src="jquery-1.12.2.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
  </head>
  <body>
    <div id="BGImage">
      <div class="container" id="tabcontainer">
        <div class="row">
          //All the content i.e text field, text box are inside
        </div>
      </div>
    </div>
  </body>
</html>

也许从这里它可以帮助你找出问题

【讨论】：

不，它不起作用。当我调整窗口大小时，它只显示一半的图像
也许你应该检查父样式，它可能会影响到 div#BGImage
当前父样式为body。但是body只有：body { margin-top: 22px;背景：无； }

【解决方案3】：

您为图片指定了 850 像素的高度。这不是响应大小。将其更改为 100%，使其适合整个屏幕。像这样的：

身高：100%；

希望这行得通。

【讨论】：

【解决方案4】：

你的代码是正确的，但你应该做一件事：

在后台使用image(Like h1, p, button)的一些内容，并使用padding/margin进行管理。如果需要，您可以使用一些针对手机和平板电脑的媒体查询。

【讨论】：