CSS gradients when scaling background with section size

Question

I have a page section that is divided into two parts. The left side is in the row container, and the other half is an image that extends beyond the container. This section has a BG gradient, which helps to give the effect that the laptop sits on a ledge. here is a screenshot of what i am trying to accomplish:

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

Objectives :

• So that the image occupies 50% of the viewing screen and touches the right side of the screen. Content should remain in the content container (string)
• The gradient remains in the position shown in the screenshot.
• The section responds accordingly in height when scaling.

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>

Foundation , . div , .

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 {
    position: absolute;
    top: 0;
}

.half-and-half-section .image--align-right {
    right: 0;
    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 );
}

CSS . , .

Im .

• , .
• , ( ), .

, .

Answer 1

...

, ?

, :

HTML

<section>
  <div id="text">
    <h1>
     Off the Slopes Counterpart
    </h1>
    <hr>
    <p>
      Test test test test
    </p>
  </div>
  <div id="image">
    <img src="http://i.imgur.com/Q04uiB1.png">
  </div>
</section>

CSS ( )

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

section div {
  display: inline-block;
  flex-basis: 50%;
}

#text {
  align-self: center;
}

#image img {
  max-width: 100%;
}

? ( )

• Flexbox. section display:flex div display:inline-block. section.
• flex-basis:50% div .
• max-width:100%, . , max-width:120% - margin-left.
• align-self:center div, section.

, .