Bagaimana cara memunculkan background image pada bootstrap

Saya style class cover dengan memasukkan background image tetapi tidak muncul, giliran saya style di div halaman index.html nya kok malah bisa muncul yah ? tolong bantuannya parah master.

index.html

 <!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>Design Interior</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Why Choose Us</a></li>
            <li><a href="#">My Design</a></li>
            <li><a href="#">FAQ</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="cover" style="background-image:url(img/bangunan.jpg);
    background-size: cover;
    height: 100vh;">
        <h1>Build Your Dream Comes True</h1>
        <p> With the cheapest contractor services </p>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

style.css

 body{
  height: 1500px;
}
.navbar-brand{
  padding-left: 90px;
}
.cover{
  padding-top: 50px;
  text-align: center;
}

html css

@aldoabieza

9 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

3 Jawaban:

Jawaban Terpilih

Gaada yang mau bantu yaaa ? yauda deh thnks.

@aldoabieza

9 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

coba agan ganti classnya jangan jadi cover, mungkin saja bertabrakan dengan classnya bootstrap Saya hanya berusaha menjawab

@JoksKur

139 Kontribusi 49 Poin

Dipost 6 tahun yang lalu

coba masukin lewat file cssnya aj gan.pake background image. klo msih ga bisa juga coba tambahin !important di blakang codingnya , kali aj benturan sma css bootstrapnya

@angga008

11 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Bagaimana cara memunculkan background image pada bootstrap

Kelas Premium!
Belajar bikin website dari nol sekarang