какая цель у этого? Ведь вы цветом полностью закроете картинку.
Но а вообще, чтоб не плодить лишние теги, воспользуйся псевдоэллементом ::before у блока с фоном-цветом.
Этому псевдоэллементу задайте блочное отображение и свой фон-картинку. По сути будет то же что и с двумя блоками, как в ответах выше, но без лишних тегов. То есть меньше кода в html

Первые 3 без особых проблем делаются порезкой фоновой картинки на части.
Вторую вообще в мобильной версии оставить без стрелочек, не нужны они на узкой экране.

А вот с облачком, то тут действительно должен думать дизайнер как сделать так, чтоб конкретно это расположение чувачка и облачка смотрелось в размере 300 пикселей по ширине. А так как это практически нереально (будет очень мелко и все детали потеряются), то дизайнер должен придумать как чувачка и облако "разделить" и отображать немного по другому их компоновку в мобильной версии (на узких экранах).

В любом случае, 1000 за раз или 50 штук, все равно в вашем случае append должен быть один раз за пределами цикла-перебора.
В цикле же просто собирать все в одну строку конкатенацией либо в массив строк, и в append'е делать join.
Это существенно разгрузит браузер.