1

Estou tentando fazer um background com um efeito curvado, mas para colocar esse efeito eu estou usando uma imagem(link da imagem: https://cdn.discordapp.com/attachments/800754994739150878/800893255343538186/wave.png) mas também quero colocar um efeito gradiente no background, mas quando vou colocar o o gradient junto com o background-image simplesmente não funciona. O que posso fazer?


   <body>
        <section></section>
    </body>
 

   section{
    width: 100%;
    height: 400px;
    background-color: tomato;
    /* background:linear-gradient(90deg, red, blue);  */
    background-image:url(../images/wave.png); 
    background-size: 100% 150px;
    background-position: bottom;
    background-repeat: no-repeat;  
    }

1 Resposta 1

1

Radial e linear-gradient são valores de background-image, e quando vc usou o CSS assim como abaixo, o background-image: {} acabou sobrescrevendo o gradient da background: {}, isso acontece pq o CSS funciona em cascata.

background:linear-gradient(90deg, red, blue); 
background-image:url(../images/wave.png); 

Para corrigir isso vc tem que usar os dois backgrounds na mesma propriedade, apenas separando eles por vírgula, lembrando que essa técnica serve para todas as propriedades do background tipo bg-position, bg-size, etc. Então seu CSS deveria ser algo assim:

background-image:url(../images/wave.png), linear-gradient(90deg, red, blue); 

Aqui tem um exemplo didático, repare como foi feito o BG do body

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url(https://unsplash.it/200/200), linear-gradient(90deg, red, blue);
  background-size: 200px 200px, cover;
  background-repeat: no-repeat;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .