Так и у нас не получится. Потому что свойств, которые вам мешают полно и угадать которое из них виновато не представляется возможным.
Можете самостоятельно убирать по одному и смотреть. Удобно это делать через инструменты разработчика.
Другой вариант: взять разметку и стили только этого куска и сделать песочницу с видимой проблемой на codepen.io
И очень велик шанс, что вы самостоятельно решите задачу, пока делаете песочницу.
Люблю переформулировать такой вопрос в другую сторону "а если бы вы были браузером (разработчиком браузера), то как бы нарисовали что попросил верстальщик?" Или "что хотел сказать верстальщик, когда писал эти свойства?"
Kostylev2021, какой-то странный выбор между фоном и svg.
Вы можете задать эту картинку фоновой svg.
Для блока или псевдоэлемента, если так удобнее.
Если с помощью svg то где такому научиться ?
Обычно это задача дизайнера.
Но, конечно, хорошо, когда и верстальщик понимает что к чему.
Вы можете просто открыть векторный редактор и нарисовать.
И почитать про структуру SVG.
ForSureN1, спасибо, я в курсе.
Но не могу рассказывать всю историю флексов и гридов в каждом вопросе. Поэтому имеет смысл тегать не меня, а автора вопроса.
И что вы сделали уже, что кто-то кого-то затмевает? И кто кого?
Короче, ваш код в песочницу на codepen.io
Множественные фоны пишутся через запятую, первый - верхний, последний - нижний. Между ними соответственно, по порядку.