Parallax zoom out effect issues

Question

I am experimenting with parallax and attempting to get a nice zoom out on scroll, However I am struggling with the image becoming smaller than the browser width and the height of the div.

As you can see in my example the red background of the wrapper section is visible as you scroll down.

You can view the example at www.adamkhourydesign.com/test

HTML

<header id="header_container">
    <div class="header_back"></div>
    <div class="logo"></div>
</header>

CSS

#header_container {
  position: relative;
  height: 600px;
  background-color: rgba(255, 100, 85, 0.5);
  background-repeat: no-repeat;
  background-size: auto 800px;
  background-position: top center;
  background-attachment: fixed;
  overflow: hidden;
}

.logo {
  height: 100px;
  width: 100%;
  background-image: url(../img/name.png);
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

.header_back {
  position: relative;
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  background-image: url(../img/header_bg.jpg);
  overflow: hidden;
}

jQuery

var pContainerHeight = $('#header_container').height();

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();
  var wZoomIn = 1+(wScroll*.0005);
  var wZoomOut = 1-(wScroll*.00005);

  if (wScroll <= pContainerHeight) { 
    $('.header_back').css({
      'transform' : 'scale('+ wZoomOut +')'
    });
    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
    });
  }

Answer 1

Thanks to Arnell Balance, with the answer you posted I managed to tweak my code slightly to get it working.

I moved the background image out of the Background property and added it as an image inside the div. Then in css I made the image eg 140% width and height auto. and finally offset the left margin half of the amount that is over 100% in this case -20%.

Code looks like this now:

HTML

    <header id="header_container">
            <div class="header_back">
                <img src="img/header_bg.jpg">
            </div>
            <div class="logo"></div>
   </header>

JQUERY

var pContainerHeight = $('#header_container').height();

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();
  var wZoomIn = 1+(wScroll*.0005);
  var wZoomOut = 1-(wScroll*.0005);

  if (wScroll <= pContainerHeight) { 
    $('.header_back img').css({
      'transform' : 'scale('+ wZoomOut +')'
    });
    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
    });
  }

CSS

#header_container {
  position: relative;
  height: 600px;
  width: 100%;
  background-color: rgba(255, 100, 85, 0.5);
  background-repeat: no-repeat;
  background-size: auto 800px;
  background-position: top center;
  background-attachment: fixed;
  overflow: hidden;
}

.logo {
  height: 100px;
  width: 100%;
  background-image: url(../img/name.png);
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

.header_back {
  position: relative;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
  background-attachment: fixed;
  background-color: rgba(154, 100, 85, 0.5);
  text-align: center;
  overflow: hidden;
}
.header_back img {
  height: auto;
  width: 140%;
  margin-left: -20%;
}