FVにて表示させる複数の画像を指定の位置に表示させ、1枚の背景画像として表示させたい

前提・実現したいこと

三枚の画像を用いて、指定の位置で表示させて1枚の背景画像として表示させたい。
・1枚目は背景を横に3等分にし、左2/3を一枚目で表示させる。
・残りの2,3枚目は背景を3等分し、残り背景1/3を2,3枚目で上下にして表示させたい。

発生している問題・エラーメッセージ

backgroundプロパティで試行錯誤しましたが一枚だけしか表示されないなどになり、アイディアが浮かびません。

該当のソースコード

--HTML--
 <!-- mv -->
    <div class="mv">
      <img src="img/ハンバーガーアイコン4.png" alt="FOOD" />
      <img src="img/コーヒーカップのフリーアイコン.png" alt="DRINK" />
      <img src="img/ティラミスケーキアイコン1.png" alt="DESERT" />
    </div>
    <!-- /mv -->
--/HTML--

試したこと

background: url()にて実装できるかと考えたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうか？

html
1<div id="mv"></div>

css
1#mv {
2  height: 200px;
3  width: 300px;
4  background:
5    no-repeat left top/66% 100% url(https://placehold.jp/200x200.png),
6    no-repeat right top/34% 50% url(https://placehold.jp/993333/ffffff/200x200.png),
7    no-repeat right bottom/34% 50% url(https://placehold.jp/333399/ffffff/200x200.png);
8}