How to fix a content or a background to a div

Question

I’d like to do with that div roll along with the page but its contents or the contents of a before that would be in the case of the image (if applicable), it would be fixed so that the content (or background) appears to disappear when scrolling the page.

In fact, as I did the fund was fixed but it was not disappearing according to what I scroll down the page. The idea is to make like one 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 />

Answer 1

This technique is actually not with an element with position:fixed, but rather an element with background-attachment: fixed. That way the element rolls with the screen, but the background of it no, woe to that effect kind of parallax.

Follow the image code above:

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: The only caveat left is about the background-attachment: fixed on iOS of older iPhones as you can see here Background problem with Iphone 6, 7 and 8