No te funciona porque el gradiente cssCSS
lo considera como una imagen, por tanto tienes definidas dos imágenes en el css CSS
(linear-gradientlinear-gradient
y urlurl
).
Algo que podría servirte seriasería utilizar un pseudo elemento como "before"before
:
.fondo-header {
height: 400px;
background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6a8ec569-2136-4725-bf5d-0b1fcb468b8d/d9b3r9l-f9e7a2ef-41e2-4a49-a61a-b35d5a89b994.png/v1/fill/w_1192,h_670,strp/cat_render_by_yiffycupcake_d9b3r9l-pre.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzZhOGVjNTY5LTIxMzYtNDcyNS1iZjVkLTBiMWZjYjQ2OGI4ZFwvZDliM3I5bC1mOWU3YTJlZi00MWUyLTRhNDktYTYxYS1iMzVkNWE4OWI5OTQucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.dHHpljpXTz8DCyzSEw7tJBJp5zsuWklf0W-u7iR0Uyk);
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
position: relative;
}
.fondo-header:before {
content: "";
right: 0;
left: 0;
bottom: 0;
top: 0;
position: absolute;
z-index: -1;
background-image: linear-gradient(90deg, rgba(190, 55, 52, 1) 0%, rgba(0, 49, 96, 1) 35%, rgba(0, 49, 98, 1) 100%);
}
<div class="fondo-header"></div>
.fondo-header {
height: auto;
background-image: url(./../images/fondo-patron.png);
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
position: relative;
}
.fondo-header:before {
content: "";
right: 0;
left: 0;
bottom: 0;
top: 0;
position: absolute;
z-index: -1;
background-image: linear-gradient(90deg, rgba(190,55,52,1) 0%, rgba(0,49,96,1) 35%, rgba(0,49,98,1) 100%);
}