Clever Geek Handbook

How can I keep text on a fixed background image while scrolling?

I have a landing page with my site name, sub-title and a button. I set a background image with background-attachment

so that it stays in place when you scroll up.

I want my title, sub-title and button to stay in place so that the overview section overlaps it. I tried to set the text at a fixed position and do 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 a intro-text

div

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

Then I tried to set a higher z index for the overview section

#overview {
  z-index: 1000; 
}
+3


source to share


2 answers


You need to make the position relative to your #overview. and set the background color. it means.

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


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

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

+4


source


The .intro-text class must have a property:

position:fixed


To stay stationary with a background image.

0


source






More articles:


All Articles