Стоит задача сделать полупрозрачную фоновую картинку поверх градиентного фона в хедере. Градиент всегда остается, а картинку можно заменить на любую другую, чтобы она оставалась нужной прозрачности. В коде ниже отображается только картинка, без прозрачности.
.header
width: 100%
background: linear-gradient(to top, #fce38a, #f38181)
position: relative
overflow: hidden
height: auto
&::before
background: url('/img/bg-top.jpg') no-repeat center
opacity: 50%
position: absolute
content: ''
display: block
height: 100%
width: 100%
left: 0
right: 0
z-index: 100