Olá, estou com um problema em meu css. Quando eu coloco um background direto pelo html o mesmo aparece, porém quando coloco o mesmo arquivo (background) ele não aparece, qual o erro? a minha imagem está em svg será que tem algum problema?
meu HTML:
<!DOCTYPE html>
<html lang="pt_br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>page-index</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nerko+One&family=Roboto:wght@300;700&display=swap" rel="stylesheet">
<link href="./css/main.css" rel="stylesheet">
</head>
<body>
<div id="page-index">
<header>
<div class="title">
<H3>Título</H3>
</div>
</header>
<main>
<div class="content">
<h2> Texto informativo</h2>
<a href="#"> HOME </a>
</div>
</main>
</div>
</body>
</html>
Meu css:
---------------------------------------------------------------------------------------
Parte do background
#page-index {
background: url(../img/background.svg) no-repeat fixed;
width: 100vh;
background-position: 35vw;
margin: 0 auto;
}
--------------------------------------------------------------------------------------
#page-index header .title {
font-family: 'Roboto', sans-serif;
display: flex;
margin-left: 50%;
margin-top: 26%;
}
#page-index main .content {
font-family: 'Nerko One', cursive;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 35%;
margin-top: 15%;
margin-left: 25%;
}
desde já agradeço!