mdbootstrap/react disables page scrolling with full page background image

Question

I've been experimenting with front-end development using mdbootstrap/react and I'm really stuck trying to figure out how adding a background image disabled page scrolling:

I have a css block in my stylesheet like this:

.background-people {
      background-image: url('../public/img/background-people.jpeg');
      background-attachment: fixed;
      height: 100vh;
    }

And then my React Layout looks like this:

    <div className="bg-image background-people">
        <div className='mask' style={{ backgroundColor: 'rgba(255, 255, 255, 0.8)' }}>
            <NavMenu />
            <MDBContainer tag="main">
              {this.props.children}
            </MDBContainer>
        </div>
    </div>

Everything works great except the page scrolling is disabled.

Answer 1

It turns out that the issue was that both the mdbootstrap bg-image and mask classes set overflow: hidden so I just changed the css and the inline styles to set it to overflow: auto

Stylesheet:

.background-people {
  background-image: url('../public/img/background-people.jpeg');
  overflow: auto;
  height: 100vh;
}

React Layout:

<div className="bg-image background-people">
    <div className="mask" style={{ backgroundColor: 'rgba(255, 255, 255, 0.8)', overflow: 'auto' }}>
        <NavMenu />
        <MDBContainer tag="main">
          {this.props.children}
        </MDBContainer>
    </div>
</div>