Preciso montar um layout com a seguinte estrutura.
Onde a parte azul vai ser uma imagem.
<header class="header-bg">
<div class="logo">
<span>Logo</span>
</div>
<nav class="menu">
<ul>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#produtos">Produtos</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
<p> BLA BLA BLA </p>
A parte do menu eu acho que posso usar flexbox
, e colocar um space-between
para deixar a logo
e o menu
cada um em um canto, porém não sei como colocar uma imagem de fundo nisso, que acabe no inicio do conteúdo do site (na imagem o sobre) e não sei como posicionar o P
(BLA BLA BLA) no meio, talvez utilizando um margin: 0 auto
porém não sei se é a melhor maneira.
background-image: url(caminho_da_imagem);