概要

background-imageに設定する画像を2つにして、その2つを横並びにしたいが、どうすればいいですかという質問がありましたので、回答した内容を書きます。

解決法

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

上記のページに書かれているように、backgroundにはカンマで区切り複数の値を設定することができるので、それを使い2つの画像を設定します。

そして、background-positionとbackground-sizeのプロパティでそれぞれ適した値を設定するだけです。

完成形

See the Pen sample by Kazunari Hirosawa (@kazunari-h) on CodePen.

まとめ

一応、一気に2つの画像を設定することはできたが、別タグにしてそれぞれでbackgroundを設定した方が簡単かもしれないです。

デザインのためにタグ構造を変えたくないという要望なら、このやり方がいいかもしれません。