Skip to main content
Mejorado formato, mudado el código desde jsFiddle a un snippet de la página
Origen Enlace
ElChiniNet
  • 3.3k
  • 12
  • 26

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:

Ejemplo en JSFiddle

.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%);
}
 

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

.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%);
}

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 sería utilizar un pseudo elemento como 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>
 

Faltaba abrir paréntesis en la url
Origen Enlace

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

.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%);
}

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

.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%);
}

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

.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%);
}
Origen Enlace

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

.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%);
}