背景画像、グラデーションアニメーションの重ね合わせレスポンシブ対応

Question

前提・実現したいこと

透過背景画像の後ろに画像サイズと同じサイズでグラデーションのアニメーションを追加し、レスポンシブ対応させたいと考えています。

発生している問題・エラーメッセージ

なんとか背景画像とグラデーションを重ね合わせることは出来ましたが、下記のコードでは、表示画面サイズを変えると、背景画像は、表示画面サイズに合わせて縦横比を維持したまま拡大縮小しますが、グラデーションは高さが500pxに固定されたままになって、背景画像とグラデーションがずれてしまいます。
また、モバイル端末で見てみると幅も高さも大きくずれてしまいます。
グラデーションのサイズを背景画像のサイズに追従させるにはどうしたらいいでしょうか？

該当のソースコード

CSS
コード

.background_img{
  background-image: url(background_image3.png);
  width:100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.background_img::after {
  content: '';
  width: 100%;
  height: 500px;
  background: linear-gradient(90deg ,#f00,#f80,#dd0,#00dd00,#00dddd,#0000ff,#ee00ee,#ff0000); 
  background-size: 200%;
  filter: blur(1px);
  animation: AnimationName 10s ease infinite;
  position: absolute;
  z-index: -1;
}

@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:200% 50%}
}

Answer 1

.background_img{
    /* 略 */
    overflow: hidden;  /* 追加 */
    position: relative; /* 追加 */
} 

.background_img::after {
    content: '';
    width: 100%;
    height: 100%; /* 変更 */
    /* 略 */
} 

親に position: relative; が無かったのが
一番の原因では^^;;

これで動くと思います^^

追記

背景画像の高さ(縦横比)を保ったまま可変にしたい場合は

background-image(背景画像) は要素に高さを与えません。
このような場合は paddingを利用します。

.background_img{
    /* 略 */
    heigth: 0;  /* 変更 */
    padding-bottom: 50%; /* 背景画像の縦横比に合わせて調整して下さい */
} 

先の変更と併せてこのように設定すると
縦横比を保ったまま
画面サイズに合わせ可変するようになります^^

Comments

[taka7777]

ご回答ありがとうございます。
回答頂いたコードを追加したら、幅方向はぴったり合いました。
ただ、高さ方向が、グラデーションの高さが固定されたまま動きません。
heght: 500px; が問題なのかと思うのですが、消すと何も表示されなくなってしまいます...。
高さを画像と合わせるにはどうすればいいですか？

[-millmill-]

.background_img に overflow: hidden;
.background_img::after に height: 100%;

これは入れましたか?

[-millmill-]

>高さを画像と合わせるには
これは .background_img の background-image: url(background_image3.png);
の事でしょうか?

[-millmill-]

.background_img の設定だけを変えるのは
.background_img::after は .background_img の子要素だからです。

親(background_img) を可変にすると、
子(background_img::after ) は親に追従して拡縮されます、
更に、overflow: hidden; で親要素からはみ出る部分を非表示にする
という事です。

[taka7777]

追記頂いた内容で設定したら解決しました。
初心者のわたしに丁寧に教えて頂いて、ありがとうございました。