css background image position fixed not working as expected

Question

I am a newbie in UI development, started building my first web application recently and chose html5-boilerplate framework. I have developed my first html page and hosted it under http://www.techtrek.guru domain.

I am struck with few issue:

1. I want the hero image to be fixed and want the text to scroll when scrolling the page. Currently the hero image also scrolls up when I scroll the web page.

   I added the position:fixed property to the .hero class but it does not work as expected. In addition I also tried adding the z-index property to -10 which also is not working.

Could you please help me understand where I am going wrong?

Answer 1

Add

background-attachment: fixed;

to the .hero class. Reference for background-attachment.