background
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!