Question

向我的引导网站添加背景图片时遇到一个小问题。我希望背景图像出现在整个页面上，所以我选择它来显示在html标签上。它工作正常，直到我添加bootstrap.min.css文件。然后我的背景消失，背景保持白色。

以下是我的Index.html和我自己的style.css文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid fill">
    <div id="content">
        <a href="#" class="btn btn-info" role="button">Link Button</a>
    </div> <!-- This one wants to be 100% height -->
  </div>
</body>
</html>

的style.css

html {
      background-image: url('test.jpeg');
      background-size: 100% 100%;
    }
    #content {
        width: 100%;
        height: 100%;
        min-height: 100%;
        display: block;
        }
    html, body {
        height: 100%;
    }

    .fill { 
        min-height: 100%;
        height: 100%;
    }

文件夹结构就像那样

Index.html
css
|
__style.css
__test.jpeg

你有什么建议可能是什么问题吗？

Answer 1

Bootstrap定义了正文的背景颜色，而不是html。

您可以将backgournd-image设置为正文，但我强烈建议您使用less或sass自定义引导版本，而不是覆盖每个css规则。

添加bootstrap css可让背景图像消失

1 个答案: