Question

我有像这样的HTML代码（我使用bootstrap）

<!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">
       <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
       <title>Bootstrap 101 Template</title>
       <!-- Bootstrap -->
       <link href="css/bootstrap.min.css" rel="stylesheet">
       <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
       <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
       <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">    </script>
       <![endif]-->
    </head>
    <body>
    <style>
    body {padding-top: 50px;
            margin-bottom:0px;
            padding-bottom:0px;
          }
    .bodinya { background-image:url(IMG_5551.jpg);
            margin-bottom:0px;
            padding-bottom:0px;
            background-size: cover; 
          }
 </style>
 <div class="navbar navbar-default  navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only"> Toggle navigation </span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Wisuda  </a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Loggin<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Mahasiswa</a></li>
                        <li><a href="#">Prodi</a></li>
                        <li><a href="#">BAK</a></li>
                    </ul>    
                </li>
             </ul>
        </div>
   </div> 
</div>

    <div class="row bodinya">
        <div class="col-md-12 ">
            <h1>Bootstrap starter template</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>
    </div>
  <!-- Fixed Footer -->
<div  class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-text pull-left">
            <p>© my</p>
        </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
 </body>
 </html>

我想尝试在bodinya课程中插入背景图片，

在预览图像成功加载但不满载（我希望图像拉伸到我的页脚）。有什么帮助吗？

Answer 1

更改.bodyinya的高度

height: 100vh;

或仅将此背景用于body代码

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

Answer 2

您可以将class="bodinya"放在身体标记处，然后调整CSS以处理整个页面。

 body {
   margin-top: 50px !important;
   margin-bottom: 50px !important;
   color: white !important;
 }
 .navbar {
   padding-right: 15px;
 }
 .bodinya {
   background-image: url(http://img0.gtsstatic.com/wallpapers/f11634bfd85724cc44858fa49c489167_large.jpeg);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
 }
 @media (max-width: 768px) {
   .navbar {
     padding-right: 0;
   }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body class="bodinya">
  <div class="container-fluid">
    <div class="navbar navbar-default  navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"> Toggle navigation </span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button> <a class="navbar-brand" href="#">Wisuda  </a>

      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a>

          </li>
          <li><a href="#">About</a>

          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Loggin<b class="caret"></b></a>

            <ul class="dropdown-menu">
              <li><a href="#">Mahasiswa</a>

              </li>
              <li><a href="#">Prodi</a>

              </li>
              <li><a href="#">BAK</a>

              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="row bodinya">
      <div class="col-md-12 ">
        <h1>Bootstrap starter template</h1>

        <p class="lead">Use this document as a way to quickly start any new project.
          <br>Integer dignissim quis metus a luctus. Nullam molestie magna finibus, lacinia turpis ac, euismod enim. Aliquam id purus ut ipsum fermentum elementum et id sapien. Nam venenatis interdum ligula vel tristique. Morbi aliquam efficitur velit at
          imperdiet. Morbi et tellus nec nisi pellentesque laoreet ac ac tellus. Vivamus enim turpis, elementum viverra tempus pharetra, consequat non leo. Nullam varius ipsum ac ex egestas imperdiet. Proin ac nisi aliquet leo vulputate facilisis nec
          eu arcu. Nam hendrerit lacinia lorem, ut fringilla tellus mollis vel. Etiam fermentum est vel luctus lacinia. Duis a justo fringilla turpis elementum interdum eu et mauris. Donec consequat tortor rhoncus felis commodo, id molestie odio viverra.
          Cras dictum cursus felis. Quisque pellentesque, risus vel porttitor efficitur, nulla nunc vulputate orci, vitae imperdiet turpis sem eget dui. Nullam dictum hendrerit hendrerit. Duis pellentesque hendrerit scelerisque. Donec venenatis, arcu
          nec ornare luctus, dui dui vehicula lacus, in ornare eros orci non arcu. Praesent erat mauris, fermentum eu nulla lacinia, auctor ultrices magna. Suspendisse tincidunt leo augue, sed faucibus mi vehicula quis. Vestibulum pulvinar metus in laoreet
          blandit. Sed ultrices eros ut scelerisque tristique. Cras id lectus malesuada, gravida est nec, pharetra quam. Sed varius libero velit, ut imperdiet tortor dictum ut. Aenean volutpat ex bibendum purus finibus, ut molestie lectus vehicula. Fusce
          ornare urna tortor, vel auctor arcu sagittis eu. Duis id ultrices nunc. Sed eget tempor mi. Vivamus in tellus lobortis, pellentesque nisl sit amet, mattis sapien Integer dignissim quis metus a luctus. Nullam molestie magna finibus, lacinia turpis
          ac, euismod enim. Aliquam id purus ut ipsum fermentum elementum et id sapien. Nam venenatis interdum ligula vel tristique. Morbi aliquam efficitur velit at imperdiet. Morbi et tellus nec nisi pellentesque laoreet ac ac tellus. Vivamus enim turpis,
          elementum viverra tempus pharetra, consequat non leo. Nullam varius ipsum ac ex egestas imperdiet. Proin ac nisi aliquet leo vulputate facilisis nec eu arcu. Nam hendrerit lacinia lorem, ut fringilla tellus mollis vel. Etiam fermentum est vel
          luctus lacinia. Duis a justo fringilla turpis elementum interdum eu et mauris. Donec consequat tortor rhoncus felis commodo, id molestie odio viverra. Cras dictum cursus felis. Quisque pellentesque, risus vel porttitor efficitur, nulla nunc
          vulputate orci, vitae imperdiet turpis sem eget dui. Nullam dictum hendrerit hendrerit. Duis pellentesque hendrerit scelerisque. Donec venenatis, arcu nec ornare luctus, dui dui vehicula lacus, in ornare eros orci non arcu. Praesent erat mauris,
          fermentum eu nulla lacinia, auctor ultrices magna. Suspendisse tincidunt leo augue, sed faucibus mi vehicula quis. Vestibulum pulvinar metus in laoreet blandit. Sed ultrices eros ut scelerisque tristique. Cras id lectus malesuada, gravida est
          nec, pharetra quam. Sed varius libero velit, ut imperdiet tortor dictum ut. Aenean volutpat ex bibendum purus finibus, ut molestie lectus vehicula. Fusce ornare urna tortor, vel auctor arcu sagittis eu. Duis id ultrices nunc. Sed eget tempor
          mi. Vivamus in tellus lobortis, pellentesque nisl sit amet, mattis sapien...</p>
      </div>
    </div>
  </div>
  <!-- Fixed Footer -->
  <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <div class="container">
      <div class="navbar-text pull-left">
        <p>© my</p>
      </div>
    </div>
  </div>
</body>

在引导程序中插入拉伸的背景图像

2 个答案: