No te funciona porque el gradiente css lo considera como una imagen, por tanto tienes definidas dos imágenes en el css (linear-gradient y url). Algo que podría servirte seria utilizar un pseudo elemento como "before": [Ejemplo en JSFiddle][1] ```CSS .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%); } ``` [1]: https://jsfiddle.net/29L5ha4y/1/