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

igawa design.

Memo

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

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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

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

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

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

デザイン的にシンメトリーにしたいのに、片方が表示されないのでなんとかしたい。

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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

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

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。