的style.css

Question

请问我怎么可能得到一个名为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;
}

Answer 1

尝试将此背景大小更改为此

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

Answer 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>

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

Answer 3

您的图片高度为850像素。这不是一个响应大小。将其更改为100％，以便适合整个屏幕。像这样：

身高：100％;

希望这有效。

Answer 4

你的代码是对的，但你应该再做一件事：

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

Boostrap背景图像

的style.css

4 个答案: