背景に画像が表示されない

Question

cssで，背景に画像が表示されません．

該当のソースコード

　　　<main>
     <a href="https://www.apple.com/jp/iphone-13/" class="main__menu main__menu__two">
      <h2>
        iPhone 13 
      </h2>
      <h3>
        できること、
        <br>
        超人的。
      </h3>
      <div class="main__menu--link">
        <object><a href="">さらに詳しく</a><i class="bi bi-chevron-right"></i></object>
        <object><a href="">購入</a><i class="bi bi-chevron-right"></i></object>
      </div>
    </a>
  </main>

 main{
   h1{
     text-align: center;
     padding: 60px 0 10px 0;
     background-color: #F5F5F7;
     font-size: 12px;
     letter-spacing: 0;
     line-height: 1.3rem;
     a{
       color: #4081D5;
     }
   }
   .main__menu{
     display: inline-block;
     height: 500px;
     text-align: center;
     width: 100%;
     h2{
       font-size: 25px;
       font-weight: bold;
     }
     h3{
       font-size: 17px;
       padding: 10px 0 15px 0;
     }
     .main__menu--link{
       a{
         font-size: 15px;
         color: #4081D5;
       }
       .bi-chevron-right{
         font-size: 11px;
         color: #4081D5;
         margin-right: 15px;
       }
     }
   }
   .main__menu__one{
     padding: 40px 0 10px 0;
     background-image: url(img/hero_iphone_13pro__dhnsegysa42u_small_2x\ 2.jpg);
     background-position: center;
     background-size: cover;
   }
   .main__menu__two{
    padding: 190px 0;
    background-image: url(img/hero_iphone_13__f194u1rdooeq_small_2x\ (1).jpg);
    background-position: center;
    background-size: cover;
    h2{
      color: black;
    }
    h3{
      color: #F3B9E1;
      font-weight: 400;
    }
   }
  }

試したこと

Google developer ツールで確認しましたが　、background-img が効いていません。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

今回は、．main__menu__one　に画像を適用させたいです．
ここにより詳細な情報を記載してください。

Comments

[hatena19]

> 今回は、．mainmenuone　に画像を適用させたいです．

提示のHTMLには mainmenuone はないですが。

こちらで提示のコードでサンプルを作成して確認してみましたが、main__menu__two には背景画像が表示されましたよ。

Answer 1

.main__menu__twoは<a>要素に適用されていますが、<a>はインライン要素で、子要素はあるものの、それ自身のコンテンツが無いので、幅が無い状態なのだと思います。

対策ですが、.main__menu__twoにdisplay: inline-block;などを設定してみるといいと思います。