Olá pessoal. Estou vendo as aulas da criação da página da barbearia alura, eu gostaria de saber como inserir uma imagem de fundo no background do cabeçalho tendo por cima da mesma toda navegação do cabeçalho?
Solucionado
Olá pessoal. Estou vendo as aulas da criação da página da barbearia alura, eu gostaria de saber como inserir uma imagem de fundo no background do cabeçalho tendo por cima da mesma toda navegação do cabeçalho?
Oi, Thiago!
Para isso, geralmente usamos uma propriedade chamada background-image.
Em geral, no seu HTML você vai aplicar esse estilo a uma <div>, e o CSS ficará assim, por exemplo:
.cabecalho-img {
background-image: url("fundo_cabecalho.png");
}Aí, posicionamento, cores, gradientes e repetições vai depender do que você quer com o background (e existe alguns exemplos ali no W3Schools), usando algumas das outras propriedades a seguir:
background-image: url("photografia.jpg");: A imagem usada;background-color: #cccccc;: Cor usada se a imagem não estiver disponível;height: 500px;: Especificar um tamanho para melhor visualização;background-position: center;: Define a posição da imagem. Aqui, no centro;background-repeat: no-repeat;: Define que não se deve repetir a imagem (faça testes com diferentes valores oara entender essa propriedade);background-size: cover;: Muda o tamanho da imagem para cobrir diferentes partes da <div>. Aqui, cobre ela toda (novamente, faça testes).Qualquer dúvida, só chamar. Bons estudos!
Amiga Isadora Gonçalves, muito obrigado pela sua informação. Deu super certo sua explicação, obrigado!