Entrar Ainda não tem acesso?
1
resposta

Posicionar uma imagem de fundo com propriedade fixed

por Jefferson Vilela Freire
| 105.1k xp | 4 posts

No meu projeto tenho um header, um main que contém uma div com uma imagem de fundo e abaixo outra div com texto e imagem, essa imagem de fundo eu quero deixar fixa, então usei o position: fixed só que ela está ficando com o topo da imagem escondida atrás do header, eu gostaria que ela respeitasse o limite do header, ficasse um pouco mais para baixo, tentei usar top, paddin-top, position: absolute e nada.

<main>
            <div id="land">

            </div>
            <article>
                <img alt="Imagem com produtos da barbearia" src="img/materiais.jpeg" />
                <h2>Nossa história</h2>
                <p id="p1">
                    texto qualquer
                </p>
                <p>
                    texto qualquer
                </p>
                <p id="p3">
                    texto qualquer
                </p>
            </article>
        </main>
#land {
    background: center center/cover fixed no-repeat url('../img/barber.jpeg');
    height: 80rem;
}

Na imagem da esquerda está com o position fixed, e na imagem da direita não, eu gostaria que com o position fixed ficasse igual ao da imagem a direita Insira aqui a descrição dessa imagem para ajudar na acessibilidadeMas se é para ficar igual, qual a diferença você me pergunta, e eu respondo, ao rolar a página podemos ver que a imagem à esquerda está fixa, e a da direita não, é este comportamento que eu quero, o fixo, só preciso que a imagem fique fixa um pouco mais abaixo, respeitando o header Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Vinicius Vieira Braz Laureano
| 143.7k xp | 6 posts
Desenvolvedor JR

Não entendi muito bem se você quer que a imagem role junto com o scroll do navegador ou se apenas quer ela abaixo do header, então vou dar duas possíveis soluções pra esses casos.

1) Rolagem junto com o scroll respeitando o header: R: Busque utilizar o position:sticky, essa propriedade irá fazer com que a imagem respeite o header e role com a página somente quando ela estiver prestes a ser "cortada" da tela. Exeplo de uso:


<img  src="url..."/>

<style>
    img {
        top: 0;
        position: sticky;
    }
</style>

2) Somente respeitar o header mas não rolar com a página: R: Para esse caso você pode explorar o display:flex com a propriedade flex-direction:column, assim um item ficará abaixo do outro respeitando seus espaços. Exemplo de uso:

<div class="flex">
    <header></header>
    <img>
</div>

<style>
    .flex {
        display: flex;
        flex-direction: column;
    }
</style>

Mais sobre position css: https://www.w3schools.com/css/css_positioning.asp

Mais sobre flexbox css: https://www.w3schools.com/css/css3_flexbox.asp

Espero ter ajudado de alguma forma.