backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。）
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
CSSで背景画像を複数指定したい。
backgroundプロパティで可能なはずだが…
CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。
例えば、下記のような書き方では、Chromeでは普通に２つ表示されるが、Safariでは１つの画像しか表示されない。
デザイン的にシンメトリーにしたいのに、片方が表示されないのでなんとかしたい。
CSS
例）
下記のコードではSafariが対応できない。ChromeはOK。
@keyframes exsample {
0% {
background:
url("assets/img/bg_paint_strokes_00.webp") no-repeat bottom 180px left -170px / 300px,
url("assets/img/bg_paint_strokes_00b.webp") no-repeat bottom 0 right -320px / 400px;
}
100% {
background:
url("assets/img/bg_paint_strokes_00.webp") no-repeat bottom 200px left -190px / 300px,
url("assets/img/bg_paint_strokes_00b.webp") no-repeat bottom 0 right -350px / 400px;
}
}
MDNサイトを参考にbackgroundのCSSを変更。
CSSの記述を変更。
MDNを参考に、以下のように書き方を変えても、やはりChromeでは表示されるのでPCは問題ないが、なぜかSafariがこの記述に対応していない。
SafariはiPhoneでのシェア率が高いのでちょっとやっかいだ。
CSS
例）
下記のコードではやはりSafariが対応できない。ただしChromeはOK。
（※backgroundを分割指定にしても変わらないということ。）
@keyframes exsample {
0% {
background-image:
url("assets/img/bg_paint_strokes_00.webp"),
url("assets/img/bg_paint_strokes_00b.webp");
background-repeat:
no-repeat,
no-repeat;
background-position:
bottom 180px left -170px,
bottom 0 right -320px;
background-size:
300px,
400px;
}
100% {
background-image:
url("assets/img/bg_paint_strokes_00.webp"),
url("assets/img/bg_paint_strokes_00b.webp");
background-repeat:
no-repeat,
no-repeat;
background-position:
bottom 200px left -190px,
bottom 0 right -350px;
background-size:
300px,
400px;
}
}
background複数指定と、animationとの組み合わせが原因だった。
原因はanimationプロパティとの組み合わせ。
今回はCSSアニメーションを使っていたので、この組み合わせを疑った。
そして一旦アニメーションを外してみたところ、Safariでも表示できた。
結果的に下記の記述で、ChromeでもSafariでも、意図通りに複数の背景画像のアニメーションが動いた。
解決方法。
CSS
例）
アニメーションのスタート部分、0％部分のコードを丸ごと元のセレクタにも記述したところ解決。
※注）
- animationもbackgroundも一括指定できるが、あえて分割指定している。今回の現象とはおそらく無関係。
- 2行目のdisplay〜7行目のmargin-topまでもおそらく今回の件とは無関係だが、実際に検証したコードなので間違いのないようにあえて残している。
- 当サイトのトップページで検証したので、もし実際の動きを確認されたい場合はこちらをご参照ください。両端の筆（stroke）の部分です。
.exsample {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin-top: -200px;
animation-name: exsample;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.618, 0.2, 0.05, 1);
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
/* ここに@keyframesの0%の指定を追記する。 */
background-image:
url("assets/img/bg_paint_strokes_00.webp"),
url("assets/img/bg_paint_strokes_00b.webp");
background-repeat:
no-repeat,
no-repeat;
background-position:
bottom 180px left -170px,
bottom 0 right -320px;
background-size:
300px,
400px;
}
@keyframes exsample {
0% {
background-image:
url("assets/img/bg_paint_strokes_00.webp"),
url("assets/img/bg_paint_strokes_00b.webp");
background-repeat:
no-repeat,
no-repeat;
background-position:
bottom 180px left -170px,
bottom 0 right -320px;
background-size:
300px,
400px;
}
100% {
background-image:
url("assets/img/bg_paint_strokes_00.webp"),
url("assets/img/bg_paint_strokes_00b.webp");
background-repeat:
no-repeat,
no-repeat;
background-position:
bottom 200px left -190px,
bottom 0 right -350px;
background-size:
300px,
400px;
}
}
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
