Procurando pela internet vi varias formas de fazer o tão famoso parallax, aquele efeito de sobreposição de imagens que dá a impressão das imagens estar em planos diferente dentro do site, buscando uma forma de fazer isso de maneira rápida e facil sem o uso do javascript, ou de um plugin jquery achei uma solução em nosso amigo inseparável de todos os dias.
Baixei um plugin de parallax (nem me lembro o nome), comecei a “fuçar” o código fonte para ver como aquilo funcionava e achei super complicado, então comecei a ver o que era relevante para o plugin funcionar é o que eu poderia remover sem prejudicar o seu funcionamento, nesse tempo descobri uma maneira diferente de realizar o parallax, depois pesquisando sobre essa nova maneira de fazer o parallax achei um post falando sobre esse assunto, quem quiser ler esse o o link do POST, lembrando que é um forma alternativa mais muito eficaz.
Bom chega de enrolação e vamos para que nos interessa.
1º vamos para a estrutura o HTML.
Sim é apenas isso que precisamos uma div com uma class para inserirmos nela o background através do css, nesse exemplo criei 2 div com as classes parallax-01 e parallax-02 e dupliquei elas, e inserir um h1 dentro delas apenas para simbolizar um titulo, mas você pode fazer como preferir texto ou apenas imagem.
2º O CSS
Vamos a explicação:
height: 100vh e usado apenas para deixar a div com tamanho total da tela, você pode definir uma altura qualquer como por exemplo 500px ou 200px.
background: url(bg-parallax01.jpg) center top aqui eu declaro a imagem que desejo usar e centralizo.
background-attachment: fixed esse é o grande astro, ele que realiza o efeito similar ao parallax.
background-size: cover Deixa a imagem com tamanho total do navegador.
Esse bloco de texto abaixo e usado para deixar o texto centralizado.
display: flex
justify-content: center
align-items: center
Caso queira saber como funciona o Flex Box acesse esse o site e se divirta com o jogo.