Background color and rubber-band scrolling in Mobi

I'm building a webpage in Mobile Safari with a fixed header/footer and rubber-band scrolling in the main content:

 html,
 body {
   margin: 0 0;
   height: 100%;
   width: 100%;
   overflow: auto;
 }
 .header,
 .footer {
   height: 50px;
   position: fixed;
   z-index: 100;
   width: 100%;
 }
 .header {
   top: 0;
   background-color: #44677F;
 }
 .footer {
   bottom: 0;
   background-color: #4E3AFF;
 }
 .container {
   height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 .content {
   background-size: 50px 50px;
   background-color: #D0FCFF;
   background-image: linear-gradient(#9DC9FF 50%, transparent 50%, transparent);
   height: 2000px;
 }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>

<body>
  <header class="header"></header>
  <div class="container">
    <div class="content"></div>
  </div>
  <footer class="footer"></footer>
</body>

</html>

How can I can change the background color of the area visible during the rubber-band scrolling?

I'd like use the same colors of the header/footer, so that when I scroll up:

and when I scroll down:

I know that is possible to change the entire color of the scrolling areas by setting a background color in the body:

.body {
  background-color: rebeccapurple;
}

so I tried to use a gradient:

.body {
  background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%);
}

but it didn't work.

One way you could achieve this is by adding fixed elements behind your content, one element for the top and one for the bottom with the same background colors as your header/footer.

#headerBackground {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: #{headerColor}
}
#footerBackground {
    position: fixed;
    bottom: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: #{footerColor}
}
<body>
  <div id="footerBackground "></div>
  <div id="headerBackground "></div>
  <header class="header"></header>
  <div class="container">
    <div class="content"></div>
  </div>
  <footer class="footer"></footer>
</body>

You may need to play around with z-index to get thing to be behind the header/footer.