Backgrond: Dá para ter uma imagem e um fundo gradiente no mesmo conteiner? | HTML e CSS

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Claudio Cezar Santos da Silva

| 50.6k xp | 36 posts

Galera, surgiu uma duvida: Dá para ter 2 backgronds dentro de um conteiner?

Eu tentei algo do tipo mas não funcionou:

.cabecalho {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../img/hashtag-fundo.png");
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto;
  background: radial-gradient(
    93.75% 175.92% at 97.92% 10.02%,
    #01375f 0%,
    #043d67 35.94%,
    #05416d 61.72%,
    #0a7a9d 100%
  );
}

Ele aplica o gradiente, mas não a imagem. https://hashtagweb.net/teste/

2 respostas

solução!

por Douglas de Oliveira Lima

| 137k xp | 47 posts

22/02/2022

Olá!

O gradiente é aplicado na mesma propriedade que a imagem de background é aplicada, ou seja, a última ação vai anular a primeira (No seu caso, o gradiente sobrepõe a importância da imagem). Mas é possível fazer mais de uma chamada na propriedade, desde que estejam na mesma linha:

.cabecalho {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../img/hashtag-fundo.png"), radial-gradient(
    93.75% 175.92% at 97.92% 10.02%,
    #01375f 0%,
    #043d67 35.94%,
    #05416d 61.72%,
    #0a7a9d 100%
  );
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto;
}

Resultado: Print da tela com o código sugerido aplicado

por Claudio Cezar Santos da Silva

| 50.6k xp | 36 posts

22/02/2022

Perfeito! É exatamente isso que eu precisava.

Muito obrigado.