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 />
z-index
como o hugocsl respondeu. Você pode inspecionar elemento e ver como foi feito no site para tirar alguma dúvida