Как корректно соединить текст и картинку?

Question

[alex zolotarev]

Comments

[Ankhena]

Положить картинку в фон. Сверху написать текст.
Можно картинку сделать фоном псевдоэлемента.

Можно ещё до кучи использовать градиент.

Answer 1

[Mizutsune]

Один из вариантов - это использовать псевдоэлементы для двойного бекграунда блока.

Вариант - #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, без добавления лишних сущностей в разметку.

Comments

[alex zolotarev]

А как вывести это текст Artbaza на передний план(z-index не помогает)?

[Mizutsune]

alex zolotarev, установить для блока с текстом position: relative.

Или:

Установить псевдоэлементам z-index: -1, а для родительского блока установить background: transparent.