CSS Gradients in Background Scaling with Section Size

I have a page section that is split in two. The left side is content in the row container while the other half is an image that goes outside of the container. This section has a gradient BG that helps give the effect the laptop is sitting on a ledge. here is a screen shot of what I’m trying to accomplish:

( https://monosnap.com/file/fX2jGJ9HcEuw6xsSFK8TzbdO023RMd )

Goals:

1. Have the image take up 50% of viewport and touch the right side of the screen. The content has to stay in the content container (row)
2. The gradient stay in the position shown in the screenshot.
3. The section responds accordingly in height when scaled.

http://codepen.io/byoungz/pen/gMrVLr

HTML:

<section class="full-width snocruapp-offtheslopes tgs-section-titles half-and-half-section hide-for-small-only">
    <div class="row">
        <div class="large-6 medium-6 columns">
          <div class="copy--with-image copy--align-left">
            <div class="tgs-section-titles"><h3>Off the Slopes Counterpart</h3>
<hr>
<p>One important piece of the user experience was that the website functioned more than just a marketing tool. We developed the dashboard area so when users logged in, they were provided with personalized data, leaderboard stats and track heat mapping.</p>
</div>
          </div>
        </div><!--end large 6 right -->
        <div class="large-6 medium-6 columns"></div>
    <div class="image--align-to-window image--align-right">
         <picture>
            <source srcset="http://sandbox.techgrayscale.com/wp-content/uploads/2016/03/slopes-image2.png" media="(min-width: 1024px)">
            <img srcset="http://sandbox.techgrayscale.com/wp-content/uploads/2016/03/sno_mbl_counterpart_nograd.png" alt="Half Image">
        </picture>
    </div>
    </div><!--end row -->
</section>

I created a Foundation grid with the content so the content stays in place accordingly. Next, I created an image div and absolutely positioned the image to lay over the other half of the grid.

CSS:

* {
  margin: 0;
  padding:0;
}

section {
    display: block;
    overflow: hidden;
}

.full-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
}

.half-and-half-section {
    position: relative;
    margin: 50px 0;
}

.half-and-half-section .image--align-to-window {

}

.half-and-half-section .image--align-right {
    float:right;
    width: 50%;
}

.snocruapp-offtheslopes {
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 75%, #ffffff 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}

I applied the CSS gradient to the section. The image is absolutely positined so it won't be part of that container and can extend to the right of the viewport.

I’m running into a few issues.

1. The image get cuts off unless I add padding to the section.
2. I have no idea how to get the gradient to stay in the same place (resize with the image proportionally) as the viewport is re-sized.

I am really at a loss how to obtain the functanlity and design in the screen shot.