backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。） / メモ / いがわ

backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。）

2022.09.06

Contents - 目次

1 CSSで背景画像を複数指定したい。
2 MDNサイトを参考にbackgroundのCSSを変更。
3 background複数指定と、animationとの組み合わせが原因だった。
4 CSS 関連メモ。

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;
 }
}

参考：複数の背景画像の利用 – CSS: カスケーディングスタイルシート | MDN

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;
 }
}

背景画像の複数指定ってCSSでできるよね。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。