Question

我想使用背景图片，并将页面的所有内容放在图像顶部的白色背景上。

我已经尝试了

.body {
  background: url('background.jpg');
  background-size: cover;
}

和

html{
    /* This image will be displayed fullscreen */
    background:url('background.jpg') no-repeat center center;

    min-height:100%;
    background-size:cover;
}

但它们都不起作用。第一个没有任何改变，第二个我可以在屏幕底部看到一小段我的图像。

这是我修剪过的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="pics/icon.ico">

    <title>News</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/styles.css" rel="stylesheet">

    <link href="carousel.css" rel="stylesheet">
  </head>
  <body id="news">
        <nav class="navbar navbar-inverse navbar-static-top">
            <!---navbar content-->
        </nav>


    <div class="container" style="background:white;">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron">
            <h1>headline</h1>
            <p>subheadline</p>
          </div>
          <div class="row">
            <!--content snipped-->
          </div><!--/row-->
        </div><!--/.col-xs-12.col-sm-9-->
      </div><!--/row-->

      <hr>

    <footer>
      <p class="pull-right"><a href="#">Back to top</a></p>
      <p>&copy; 2015 </p>
    </footer>

    </div><!--/.container-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="offcanvas.js"></script>

  </body>
</html>

Answer 1

你的风格改变

body {
  background: url('background.jpg');
  background-size: cover;
}

和html

 <div class="container" style="background:transparent;">

Answer 2

这将有效。试试这个

    html{
      background-image: url('background.jpg');
      background-repeat: no-repeat;
      background-size: cover;
    }

并给背景颜色：白色到div或para，无论你想要白色背景。

Answer 3

首先，没有＆＃34;身体＆＃34;类，

.body { // if you want to choose body object, you have to remove dot
 background: url('background.jpg');
 background-size: cover;
}

第二个，你的容器div有一个背景css

<div class="container" style="background:white;">

具有内容覆盖的Bootstrap-背景图像

3 个答案: