background-imageが反映されない、そこのdiv内のコンテンツが表示されない

Question

こちらの作成中のサイトですが、
http://spiritualcompany.net/portfolio/site1/index.html

青い背景の部分にCSSで背景画像を設定しているのですが表示されません。
前は、表示されていたのですが、headerを作っていたら表示されなくなりました。
また中のdiv内のコンテンツが表示されません。

 <header class="fixed-top bg-light">
      <div class="container-fluid header-containt">
        <div class="row">
          <div class="col-md-6">
            <a href="#"><i class="fas fa-campground fa-2x"></i></a>
          </div>
          <div class="col-md-6 nav-content">
            <nav class="navbar navbar-expand-lg navbar-light">
              <a href="#">Service</a>
              <a href="#">Price</a>
              <a href="#">Communication</a>
              <a href="#">Contact</a>

            </nav>
          </div>
        </div>
      </div>           
    </header>

    <div class="container-fluid first">
      <div class="row">
        <div class="col-md-6">
          <h2>テストです。</h2>
        </div>
        <div class="col-md-6">
          <h2>テストです。</h2>
        </div>

      </div>

    </div><!--end of first-->
      

body{
    margin: 0;
    background-color: lightsteelblue;
}

header i{
    color: pink;
    display: inline;
}

.header-containt{
    padding-top: 20px;
    padding-bottom: 20px;
}

.nav{
    margin: 0 5px 0 0 ;
}

nav a{
    padding-right: 10px;
    color: black;
    text-decoration: none;
}

nav a:hover{
    text-decoration: underline;
    color: black;
}

.first{
    background-image: url("../img/top-back.jpg");
}

Answer 1

headerのfixed-topクラスで画面上部に固定してますが、position: fixed;で固定しているので、通常のフローから外れて浮いた状態になってます。
そのため、.firstブロックがheaderの背面に隠れています。

.firstブロックをheaderの高さ分下に移動させれば表示されるようになります。

例えば margin-top で移動させればいいでしょう。

.first {
    background-image: url(../img/top-back.jpg);
    margin-top: 80px;
}

Comments

[dobashi]

ご回答ありがとうございます！

position: fixed;にすると、浮いた状態になるのですね。
勉強になります。
margin-topで調整したら、背景画像が出てきました。
ありがとうございます！