Skip to main content
se añadieron 265 caracteres en el cuerpo
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Simplemente cámbialos de orden y ponles una coma entre medio de los dos.

Esto se debe a que como los gradientes actúan como imágenes tienes que hacer uso de las capas de múltiples imágenes de fondo. Al situar varias imágenes en la propiedad background, estas se establecen en orden y la primera es la que está posicionada encima y el resto se posicionan detrás, en el mismo orden en el que estén situadas. Por ello tienes que poner primero la imagen, para que esté en un primer plano y el gradiente detrás para que actúe de background.

Por supuesto, entre las distintas capas, tiene que haber transparencia para que se pueda ver la capa que hay debajo. En este caso el background de la primera capa (la imagen) es transparente para que se pueda ver el gradiente detrás, si fuera opaca no se vería.

.fondo-header {
    height: 100vh;
    background: url("https://www.lunapic.com/editor/premade/transparent.gif") no-repeat center, 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>

Simplemente cámbialos de orden y ponles una coma entre medio de los dos.

Esto se debe a que como los gradientes actúan como imágenes tienes que hacer uso de las capas de múltiples imágenes de fondo. Al situar varias imágenes en la propiedad background, estas se establecen en orden y la primera es la que está posicionada encima y el resto se posicionan detrás, en el mismo orden en el que estén situadas. Por ello tienes que poner primero la imagen, para que esté en un primer plano y el gradiente detrás para que actúe de background.

.fondo-header {
    height: 100vh;
    background: url("https://www.lunapic.com/editor/premade/transparent.gif") no-repeat center, 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>

Simplemente cámbialos de orden y ponles una coma entre medio de los dos.

Esto se debe a que como los gradientes actúan como imágenes tienes que hacer uso de las capas de múltiples imágenes de fondo. Al situar varias imágenes en la propiedad background, estas se establecen en orden y la primera es la que está posicionada encima y el resto se posicionan detrás, en el mismo orden en el que estén situadas. Por ello tienes que poner primero la imagen, para que esté en un primer plano y el gradiente detrás para que actúe de background.

Por supuesto, entre las distintas capas, tiene que haber transparencia para que se pueda ver la capa que hay debajo. En este caso el background de la primera capa (la imagen) es transparente para que se pueda ver el gradiente detrás, si fuera opaca no se vería.

.fondo-header {
    height: 100vh;
    background: url("https://www.lunapic.com/editor/premade/transparent.gif") no-repeat center, 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>

Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Simplemente cámbialos de orden y ponles una coma entre medio de los dos.

Esto se debe a que como los gradientes actúan como imágenes tienes que hacer uso de las capas de múltiples imágenes de fondo. Al situar varias imágenes en la propiedad background, estas se establecen en orden y la primera es la que está posicionada encima y el resto se posicionan detrás, en el mismo orden en el que estén situadas. Por ello tienes que poner primero la imagen, para que esté en un primer plano y el gradiente detrás para que actúe de background.

.fondo-header {
    height: 100vh;
    background: url("https://www.lunapic.com/editor/premade/transparent.gif") no-repeat center, 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>