Olá César, tudo bem? Não se preocupe em postar aqui no fórum, estamos aqui para ajudar.
Peço desculpas pela demora em obter um retorno
Sobre a sua dúvida, você pode tentar utilizar a propriedade "background-size: cover;" em vez de "background-size: auto 295px;". Isso fará com que a imagem de fundo se ajuste automaticamente ao tamanho do elemento pai, sem distorcer a proporção da imagem.
Quanto ao problema de o conteúdo da section seguinte ir para baixo, você pode tentar utilizar a propriedade "float: left;" no elemento do cabeçalho, para que ele fique ao lado da section seguinte. Lembre-se de utilizar a propriedade "clear: both;" no elemento seguinte, para que ele não fique flutuando ao lado do cabeçalho.
Segue um exemplo de código CSS que pode ajudar:
header {
background-image: url('caminho/para/imagem.jpg');
background-size: cover;
height: 295px;
float: left;
}
section {
clear: both;
}
Todavia, vale ressaltar que como não tenho acesso ao cenário completo do projeto, outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.
No entanto, para que eu possa auxiliá-lo de forma mais precisa, seria ótimo se você pudesse compartilhar o código completo. Você pode fazê-lo por meio de um repositório no GitHub ou compartilhando uma pasta de acesso público no Google Drive. Dessa forma, poderei analisar o código de maneira mais detalhada e fornecer orientações mais assertivas. Aguardo seu compartilhamento!
Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!
Sucesso
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
