Один из вариантов - это использовать псевдоэлементы для двойного бекграунда блока.
Вариант - #1
.element {
width: 100%;
height: 400px;
position: relative;
}
.element:before {
content: "";
width: 30%;
height: 100%;
background: #673ab7;
position: absolute;
top: 0;
left: 0;
}
.element:after {
content: "";
width: 70%;
height: 100%;
background: url(image.jpg);
position: absolute;
top: 0;
right: 0;
}
Блок с текстом уже при желании можно отцентрировать кучей различных способов.
Если рассматривать другие варианты, то к примеру можно взять свойство background-image и применить с его помощью два фона к блоку, путём указания двух разных бекграундов, плюс минус потребуется настройка положения, размера, etc. Допустим первый бекграунд сделаем градиентом, а для второго уже можно использовать изображение.
Вариант - #2.element {
width: 100%;
height: 400px;
background: linear-gradient(to right, #e91e63 100%, transparent), url(image.jpg);
background-size: 30% 100%, 70% 100%;
background-position: left center, right center;
background-repeat: no-repeat, no-repeat;
}
Есть конечно ещё множество других вариантов, но некоторые из них не стоит рассматривать, потому что данная задача решается одним только CSS, без добавления лишних сущностей в разметку.
