1

Gostaria de fazer com essa div rolasse junto com a página mas o seu conteúdo ou o conteúdo de um before que seria no caso a imagem(se fosse o caso), ficasse fixado de forma que desse a aparência de o conteúdo (ou fundo) sumisse ao rolar a página.

De fato, como eu fiz o fundo ficou fixo mas ele não foi sumindo de acordo com que eu rolasse a página. A ideia é fazer tipo um overflow: hidden.

#teste {
  width: 100%;
  height: 100%;
  position: relative;
}

#teste:before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/8f/%24700%2C000_Home.jpg");
  background-size: cover;
  position: fixed;
  overflow: hidden;
}
<div id=teste></div>

eu <br />
eu <br />
eu <br />
eu <br />
eu <br />
eu <br />
eu <br />
eu <br />
eu <br />
eu <br />
eu <br />
eu <br />

5
  • Não sei se entendi, mas é isso que quer? repl.it/@Costamilam/HurtfulHilariousKeygens
    – Costamilam
    6/07/2019 às 14:02
  • Não! O que eu quero fazer é o que acontece no banner que está no topo desse site: banesecard.com.br/Home 6/07/2019 às 14:06
  • Mas teria como você alterar esse teu exemplo para ficar apenas a div.imagem e um bloco de eu <br /> como na pergunta para fazer om que o efeito que ocorre na div.imagem continue ocorrendo? Porém, ao invés de content do before ter 'Imegem', gostaria que existisse mesmo uma imagem, pode ser do google, que tivesse as dimensoes da div. 6/07/2019 às 14:32
  • Não entendi bem o que quer, parece que tu já tem o que deseja, só arrumar o z-index como o hugocsl respondeu. Você pode inspecionar elemento e ver como foi feito no site para tirar alguma dúvida
    – Costamilam
    6/07/2019 às 14:48
  • Carlos Editei completamente a resposta, acho que agora está mais de acordo com o efeito que vc queria
    – hugocsl
    6/07/2019 às 15:17

1 Resposta 1

1

Essa técnica na verdade não é com um elemento com position:fixed, mas sim um elemento com background-attachment: fixed. Dessa forma o elemento rola com a tela, mas o background dele não, ai da esse efeito meio que de parallax.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 70px;
    color: red;
}

.fixo {
    width: 100%;
    height: 100px;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/8f/%24700%2C000_Home.jpg");
    background-size: cover;
    background-attachment: fixed;
        background-position: center center;

}
.con {
/* essa altura é só para vc ver melhor o exemplo, mas vc não precisa definir uma altura aqui*/
    height: 100%; 
}
<div class="fixo">
    conteúdo qq
</div>
<div class="con">
    resto do content
</div>

OBS: A única ressalva que fica é sobre o background-attachment: fixed nos iOS dos iPhones mais antigos como vc pode ver aqui Problema de background com Iphone 6, 7 e 8

11
  • Oi Hugo, ainda não é isso! O que eu quero fazer é o que acontece no banner que está no topo desse site: banesecard.com.br/Home 6/07/2019 às 14:06
  • @CarlosRocha agora entendi melhor, fiz uma edição por completo da resposta, inclusive a técnica é outra, diferente do que a gente pensou inicialmente... ;)
    – hugocsl
    6/07/2019 às 14:54
  • Hum, entendi. Mas a imagem precisa ser obrigatoriamente do tamanho da div Como faz? 6/07/2019 às 15:47
  • @CarlosRocha não jovem, aqui .fixo { ... height: 100px; vc pode coloca a altura que achar melhor, inclusive em pixels, na outra div eu coloquei uma altura só para ter scroll na página e vc poder ver e testar o efeito. imgur.com/IALMY03 com 100px de altura em .fixo ficara assim
    – hugocsl
    6/07/2019 às 15:58
  • hum. Mas esse height: 100px é o tamanho da div. O que eu preciso é que a imagem tenha o tamanho da div. Eu coloquei background-size: cover; e nãp funcionou. Será que não precisa usar um :before? 6/07/2019 às 16:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .