7

Hola alguien sabe como poner un fondo degradado con una imagen (en png) en css?. Buscando en internet escontre este código:

background: red url(./../images/fondo-patron.png) no-repeat bottom center;

Funciona pero con una imagen solida (por ejemplo rojo, etc)

Pero cuando lo aplico a mi diseño con el degradado no funciona:

.fondo-header {
    height: auto;
    background: linear-gradient(90deg, rgba(190,55,52,1) 0%, rgba(0,49,96,1) 35%, rgba(0,49,98,1) 100%) url(./../images/fondo-patron.png) no-repeat bottom center;
}

Y no quiero usar z-index porque me desbarata el diseño inicial.

GRACIAS

1
  • Me funcionó usando el html, estaba realizando el backgroup con el body, pero, con este si todo bien. Cabe anotar, que ensayé con el RADIAL, pero no. Muchas gracias Commented el 7 jul. 2023 a las 22:15

3 respuestas 3

4

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>

2
  • Francisco Garrido, gracias por tu ayda, no lo habia tenido en cuenta GRACIAS
    – Diego Diaz
    Commented el 21 nov. 2019 a las 21:49
  • 2
    Es incorrecto: Sí se pueden tener varias imágenes ó capas. No funciona por la transparencia.
    – Sal
    Commented el 23 nov. 2019 a las 1:07
2

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>

0

El truco es la transparencia. Sí puedes definir varias imágenes de fondo, cada valor separado por coma es una capa; las primeras se anteponen a las posteriores, pero si una capa antepuesta no tiene transparencia (o alfa) opacará a las capas de abajo. En tu css tienes un alfa de 1 -el 4to. parámetro de rgba-, es decir, sin transparencia o totalmente opacas cuando valores en porcentaje ó menores a uno dan transparencia, prueba con 0.5 ó 50%. El ejemplo de Francisco funciona por que primero pone un gif con transparencia.

1
  • Sí, por supuesto en mi respuesta daba por hecho que las diferentes capas tienen que tener transparencia ya que es de lógica que si una capa es opaca no se verá la que está debajo de todas maneras ahora actualizo mi respuesta. Commented el 23 nov. 2019 a las 10:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.