background-imageの背景色が変わらない

Question

background-imageの背景色がbackground-colorで設定しても変わりません。
下記CSSのように画像の下側だけ丸くしてます。

header {
  height: 585px;
  width: 100%;
  background-image: url(paspol_images/main_visual.jpg);
  background-size: cover;
  border-bottom-right-radius: 600px 30px;
  border-bottom-left-radius: 600px 30px;
  color: white;
  display: block;
}

  <header>
      <div class="header-left">
        <img class="logo" src="paspol_images/logo.png">
      </div>
      <div class="header-right">
        <ul>
          <li><a href="#">TOP</a></li>
          <li><a href="#">PRODUCT</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
  </header>

このように丸くした部分だけ後ろが白くなってしまいます・・・

Comments

[hatena19]

htmlコードも提示してください。

[_arukuneko]

提示しました！

[退会済みユーザー]

JPG なんで透過しませんが

[_arukuneko]

pngにしてみたのですが変わりません・・・

Answer 1

下記でどうですか。

header {
  height: 585px;
  width: 100%;
  background-image: url(paspol_images/main_visual.jpg); 
  background-size: cover;
  border-bottom-right-radius: 600px 30px;
  border-bottom-left-radius: 600px 30px;
  color: white;
  display: block;
  position: relative; /* 追加 */
}

/* 以下追加 */
header::after {
  content: "";
  display: block;
  background-color: lightgray;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

Comments

[_arukuneko]

すごい。。。できました。。。
もっと勉強します。ありがとうございます。