background-imageがheaderに被ってしまう

Question

background-imageにしている写真がスクロールするとヘッダーよりも上に来てしまい不恰好になってしまっています。

これをヘッダーに重ならないように指定したいのですがやり方がわかりません。
どなたかご教示いただけますと幸いです。

■現状

■スクロール後

##_tweet.html.erb
      --省略--
        <div class="content_pic" style="background-image: url(<%= tweet.image %>);">
          <p><%= simple_format(tweet.catchphrase) %></p>
        </div>
      </div>

.content_pic {
  background-color: gray; #写真が貼られなかった場合
  width: 300px;
  height: 250px;
  margin: 0 auto;
  background-size: 300px 250px;
  text-align: left;
  position: relative;
}

よろしくお願いいたします。

Answer 1

ヘッダー要素に z-index: 9999; を指定してみるのはどうでしょう

Comments

[yastinbieber]

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

教えていただいた通り試したところ無事解決しました！！
本当にありがとうございます！