Header is cut off when it does not fit in the width

Question

I have a problem with the header of my page,

I have a div that inside there are 2 divs, in the first div is the background as background, and in the second div I have an image also as background positioned a little below to make an effect as protruding from the first div.

My problem comes to reduce the size of the browser, I would like to simply reduce everything and be readable, the first div behaves well, but the image that is above, does not reduce its size so it is cut as it does not enter the width of the page.

How do I fix this?

header .container-fluid {
  padding-left: 0;
  padding-right: 0;
  height: 550px;
  position: relative;
}

header .banner {
  background-image: url("../images/banner.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 100%;
  position: absolute;
  bottom: -70px;
}

header .parallax {
  height: 475px;
  background-image: url("../images/banner_parallax.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: inherit;
  background-attachment: fixed;
}

<header>
  <div class="container-fluid">
    <div class="parallax"></div>
    <div class="banner"></div>
  </div>
</header>