Для того, чтобы картинка была позади розового "цвета" я бы сделал следующее.
Во-первых, разделил бы этот background на две части, то есть, на два svg-объекта.
Во-вторых, с помощью абсолютного позиционирования и z-index'ов разместил бы их уже на странице.
Если информация в таком виде не помогла, то ответьте на этот коммент, я попробую помочь кодом)
background: linear-gradient(to right, #1F4E79 0%, #1F4E79 50%, #ddd 50%, #ddd 100%);
и как это по диагонали разместить
Диагональ это to right bottom и аналоги, а не to right
Но в макете у вас не диагональ, там какое-то скругление довольно странное и пока не ясно чем оправданное.
Делается с помощью просто svg или в сочетании с clip-path (и псевдо)
и чтобы текст с картинкой не был сзади?
Это не очень понятно.
Вообще провалиться под фон это нужно постараться.
Так что покажите в песочнице на codepen.io как это у вас получилось.
