backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。)|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

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

CSSの背景画像を確認しよう。

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

CSSで背景画像を複数指定したい。

backgroundプロパティで可能なはずだが…

CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。

例えば、下記のような書き方では、Chromeでは普通に2つ表示されるが、Safariでは1つの画像しか表示されない。

デザイン的にシンメトリーとならないのでなんとかしたい。

@keyframes selector {
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サイトを参考にCSSを変更。

CSSの記述を変更。

MDNを参考に、以下のように書き方を変えても、やはりChromeでは表示されるのでPCは問題ないが、なぜかSafariがこの記述に対応していない。

SafariはiPhoneでのシェア率が高いのでちょっとやっかいだ。

@keyframes selector {
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


animationとの組み合わせが原因だった。

原因はanimationプロパティとの組み合わせ。

今回はCSSアニメーションを使っていたので、この組み合わせを疑った。

そして一旦アニメーションを外してみたところ、Safariでも表示できた。
結果的に下記の記述で、ChromeでもSafariでも、意図通りに複数の背景画像のアニメーションが動いた。

解決方法。

アニメーションのスタート部分、0%部分のコードを丸ごと元のセレクタにも記述したところ、解決。

注)

  • animationプロパティは一括指定できるが、あえて分割指定している。今回の現象とはおそらく無関係。
  • 2行目のdisplay〜7行目のmargin-topまでもおそらく今回の件とは無関係だが、実際に検証したコードなので間違いのないようにあえて残している。
  • 当サイトのトップページで検証したので、もし実際の動きを確認されたい場合はこちらをご参照ください。両端の筆の部分です。
selector {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100vh;
 margin-top: -200px;
 animation-name: bg_sayagata_02;
 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;
 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 selector {
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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。