background
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
background
Oi, Gabriela, tudo bem?
A propriedade background-image é muito interessante para usarmos quando queremos atribuir uma imagem através do CSS no nosso documento HTML. Vamos supor que você tenha um arquivo SVG chamado menu.svg e queira usá-lo como imagem de fundo de um menu. Aqui está um exemplo de como você pode fazer isso usando CSS:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Exemplo de Background Image</title>
</head>
<body>
<div class="menu"></div>
</body>
</html>
.menu {
width: 100%;
height: 50px;
background-image: url('menu.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Neste exemplo, a classe .menu define o estilo do seu menu. A imagem de fundo menu.svg é aplicada usando background-image. A propriedade background-size: contain garante que a imagem se ajuste ao tamanho do elemento sem distorção, background-repeat: no-repeat impede que a imagem se repita, e background-position: center centraliza a imagem.
Caso tenha dúvidas específicas sobre esse assunto você pode contar com o fórum para te ajudar. Para isso use o guia de como fazer uma boa pergunta no fórum para fornecer todas as informações necessárias para podermos te ajudar de forma assertiva.
Espero que dê tudo certo. Abraços!