Как прилипить картинку на градиент?

Question

[Kalwin UA]

Есть блок в шапке с фотом градиента, и мне на него нужно прилепить картинку с градиентом, как это сделать?
html
<div class="head-line">тыры-пыры</div>
css

.head-main {
  padding: 35px 0 5px 0;
    background-blend-mode: multiply;
    background-color: -moz-linear-gradient(top,  rgba(53,170,195,1) 0%, rgba(113,228,212,1) 100%);
    background-color: -webkit-linear-gradient(top,  rgba(53,170,195,1) 0%,rgba(113,228,212,1) 100%);
    background-color: linear-gradient(to bottom,  rgba(53,170,195,1) 0%,rgba(113,228,212,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35aac3', endColorstr='#71e4d4',GradientType=0 );
    background-image: url(https://friend.ua/image/catalog/pages/sites/header.png);
}

Знаю можно и практикую лепку на обычный цвет, работает, а с вариантами градиента почему-то не дружит...

Answer 1

[OxCom]

Если я правильно понимаю вопрос, то можно использовать ::before и ::after

Comments

[Kalwin UA]

Можно, но тогда внутри находящийся див или ссыль не будет активна. Даже если присвоить абсолютную позицию.

[OxCom]

Pasha Dayneka, обновил в соответствии с новыми условиями: "врап" внутреннего контента c position: relative;, градиент на контейнере, ::before заменён стилями от ::after, а сам ::after убран.

Answer 2

[Кирилл Ушаков]

background: bg1, bg2, ..., bgN
Ну а дальше сами мозг поднапряжете)

Comments

[Kalwin UA]

Див в див пихать?

[Кирилл Ушаков]

??
Через background задаёте два фон через запятую. Первый картинка, второй градиент. Не выйдет просто поменяйте порядок. Градиент с прозрачностью естественно, что б картинку не перекрыл полностью.

тыц