How to have text stay fixed with background image while scrolling?

Question

I have a landing page that has the title of my site, a sub-header, and a button. I made the background image fixed with background-attachment so that it stays in place when you scroll up.

I want my title, sub header, and button to stay in place so the overview section will overlap it. I tried setting the text to be in a fixed position and making the z-index: -1, but it goes behind the background image and appears in the overview section. https://codepen.io/anon/pen/qmdzzz

The text is wrapped in the intro-text div

@media (min-width: 768px){
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
    position: fixed;
    z-index: -1
  }
}

Then I tried setting a higher z-index for the overview section

#overview {
  z-index: 1000; 
}

Answer 1

You need to make position relative of your #overview. and set a background color. that means.

#overview {background-color: #fff;position: relative}

remove z-index: -1 from header .intro-text Also I have created a pen for you. You can take a look on there.

http://codepen.io/bizedkhan/pen/eWpOaW