Conforme eu vou diminuindo a janela do navegador aumenta um espaço da div de baixo.
Queria que ficasse com o mesmo resultado porem sem esse espaço entre as divs, eu usei o background:cover
e meio que resolveu o problema, porem a imagem começou ficar picotada e nao consegue-se ver o conteúdo dela.
Segue a imagem de como quero que fique e depois como ela vai ficando
HTML: `
<nav>
<div>
<picture><img src="../elementos/logo/logomarca-branca.png" alt="Foto da logomarca" class="imagem-logo">
</picture>
</div>
<!-- <div class="masc-fem">
<a href="#">MASCULINO</a>
<a href="#">FEMININO</a>
</div> -->
<button>☰</button>
<ul style="color: aliceblue;" id="itens">
<a href="#">
<li>Masculino</li>
</a>
<a href="#">
<li>Feminino</li>
</a>
<a href="#">
<li>Contato</li>
</a>
</ul>
</nav>
<div class="fundo-medio" style="column-count: 2;"> </div>
<p>
<div class="fundo-azul">
</div>
</p>
</header>
<main> oi</main>
`
CSS: nav { background-image: url(../elementos/imagens/with-off.jpg); background-position: center top; background-repeat: no-repeat; background-attachment: scroll; /* background-size: 100%; */ background-size: contain; height: 334px; width: 100%; }nav { justify-content: space-between; }header > nav { background-color: rgb(255, 255, 255); width: 100%; height: 808px; }body { background-color: white; margin: 0px; }
nav {
background-image: url(../elementos/imagens/with-off.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
/* background-size: 100%; */
background-size: contain;
height: 334px;
width: 100%;
}