概要
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を設定した方が簡単かもしれないです。
デザインのためにタグ構造を変えたくないという要望なら、このやり方がいいかもしれません。