title: absolute image left side in the container
body: <p>I use foundation grid, but I need to keep this grid and make an absolute left and right column with an image for full width, I've already made the right side with image and left side with text and gray background. But I can not make the same thing that image should be on left side and the gray background to the right side.</p>
  
  <pre><code>enter code here
  &lt;div class="form-banner form-banner--medium form-banner-placement--right"&gt;
      &lt;div class="form-banner-container"&gt;
        &lt;div class="form-banner-wrapper form-banner-wrapper--original"&gt;&lt;img src="https://dummyimage.com/600x400/blue/fff&amp;text=image+here"&gt;
          &lt;div class="form-banner-left"&gt;
            &lt;div class="row"&gt;
              &lt;div class="columns"&gt;&lt;span class="tag"&gt;recommended&lt;/span&gt;
                  &lt;div class="spacer-15"&gt;&amp;nbsp;&lt;/div&gt;
                &lt;h3&gt;Monitoring&lt;/h3&gt;
                  &lt;div class="spacer-30"&gt;&amp;nbsp;&lt;/div&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias distinctio explicabo suscipit eligendi ratione asperiores unde amet expedita vero numquam magnam officiis veniam natus tempora in vel, ipsam cupiditate dolorem.&lt;/p&gt;
                  &lt;div class="spacer-40"&gt;&amp;nbsp;&lt;/div&gt;&lt;a class="button secondary small"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    .form-banner {
       position: relative;
       background: white;
       overflow: hidden;
        }
    .form-banner img {
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
         bottom: 0;
       }
    .form-banner-container {
       max-width: rem-calc(1200);
       height: 100%;
       margin-left: auto;
       margin-right: auto;
       padding-left: rem-calc(20);
       padding-right: rem-calc(20);
       }
       .form-banner-wrapper {
         height: 100%;
         margin: 0 -9600rem;
         padding-left: 9600rem;
         padding-right: 9600rem;
         position: relative;
         z-index: 0;
          }
        .form-banner-wrapper:before {
         content: "";
         z-index: -1;
         width: 50%;
          background-color: gray;
         }
  
       .form-banner-placement--right.form-banner .form-banner-wrapper {
          padding-bottom: rem-calc(100);
       }
     .form-banner-placement--right.form-banner .form-banner-wrapper img {
       position: absolute;
        top: 0;
        right: 9600rem;
        left: 50%;
        bottom: 0;
         z-index: -2;
       height: 100%;
       width: 50vw;
       object-fit: cover;
       object-position: 50% 50%;
     }
    .form-banner-placement--right.form-banner .form-banner-wrapper:before {
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
     }
    .form-banner-placement--right.form-banner .form-banner-wrapper:after {
      position: absolute;
      top: 0;
      right: 0;
      left: inherit;
      bottom: 0;
      content: "";
      background-color: #ffffff;
      opacity: 0.8;
      z-index: -1;
      width: 50%;
     }
     .form-banner-placement--right.form-banner .form-banner-wrapper--         original:after {
      opacity: 0;
      z-index: 0;
     }
     .form-banner-placement--right.form-banner .form-banner-left {
      position: absolute;
      top: 0;
      right: 50%;
      left: 9600rem;
      bottom: 0;
      padding-top: 5rem;
     }
  
     .form-banner--large .form-banner-left {
      padding: rem-calc();
     }
  
    .form-banner--920px .form-banner-left {
       padding: rem-calc();
       }
  
     .form-banner--125 {
      height: 85;
      }
     .form-banner--125 .form-banner-left {
       padding: rem-calc(160);
        }
  
     .form-banner--large {
         height: 920px;
      }
  
       .form-banner--medium {
        height: 466px;
        }
  </code></pre>
  
  <p>I prived code on codepen <a href="http://codepen.io/palaniichukdmytro/pen/QKRRam" rel="nofollow">Codepen</a></p>
  
  <p><a href="https://i.stack.imgur.com/Nzxl8.png" rel="nofollow"><img src="https://i.stack.imgur.com/Nzxl8.png" alt="enter image description here"></a></p>