White area around a div when scrolling

Question

I have a div with a fixed background image (red part) but when I scroll the page, the div over has some white areas on the sides which hide the background

White area on the top

white areas on the sides after having scrolled below

css code of the background image

  #title {
  background: url('../res/red.jpg');
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
}

css part of the div over

#text {
  width: 50%;
  height: 5000px;
  margin: auto;
  padding: 20px;
  margin-top: 100px;
  background-color: #efeff5;
  box-shadow: 5px 10px 8px #888888;
}

html code

<div id="title">
      <div id="text">
        <math>
          <mfrac>
            <mi>2</mi>
            <mi>2</mi>
          </mfrac>
          = 1
        </math>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>

What can I do to avoid this?