absolute image left side in the container

Question

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.

enter code here
<div class="form-banner form-banner--medium form-banner-placement--right">
    <div class="form-banner-container">
      <div class="form-banner-wrapper form-banner-wrapper--original"><img src="https://dummyimage.com/600x400/blue/fff&text=image+here">
        <div class="form-banner-left">
          <div class="row">
            <div class="columns"><span class="tag">recommended</span>
                <div class="spacer-15">&nbsp;</div>
              <h3>Monitoring</h3>
                <div class="spacer-30">&nbsp;</div>
              <p>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.</p>
                <div class="spacer-40">&nbsp;</div><a class="button secondary small">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  .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;
      }

I prived code on codepen Codepen

Answer 1

Check it out, hope its helps you:

.form-banner {
  position: relative;
  background: white;
  overflow: hidden;
}

.form-banner-wrapper {
  height: 100%;
  margin: 0 -9600rem;
  padding-left: 9600rem;
  padding-right: 9600rem;
  position: relative;
  z-index: 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);
}

/*=========================================================
  01. #FORM BANNER PLACEMENT RIGHT
=========================================================*/
.form-banner-placement--right.form-banner .form-banner-wrapper {
  padding-bottom: rem-calc(100);
}
.form-banner-placement--right.form-banner .form-banner-wrapper img {
float: left;
z-index: -2;
height: 100%;
width: 50%;
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 {
width: 45%;
padding: 6rem 2.5%;
float: right;
background-color: gray;
}

/*=========================================================
  03. #FORM BANNER SIZE
=========================================================*/
.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;
}

<div class="form-banner form-banner--medium form-banner-placement--right">
        <div class="form-banner-container">
          <div class="form-banner-wrapper form-banner-wrapper--original"><img src="https://dummyimage.com/600x400/blue/fff&text=image+here">
            <div class="form-banner-left">
              <div class="row">
                <div class="columns"><span class="tag">recommended</span>
                    <div class="spacer-15">&nbsp;</div>
                  <h3>Monitoring</h3>
                    <div class="spacer-30">&nbsp;</div>
                  <p>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.</p>
                    <div class="spacer-40">&nbsp;</div><a class="button secondary small">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

Fiddle Demo

Answer 2

classes edited

.form-banner-placement--right.form-banner .form-banner-wrapper img {
position: absolute;
top: 0;
right: 50%;
left: 9600rem;
bottom: 0;
z-index: -2;
height: 100%;
width: 50vw;
object-fit: cover;
object-position: 50% 50%;
}

.form-banner-placement--right.form-banner .form-banner-left {
position: absolute;
top: 0;
right: 9600rem;
left: 50%;
bottom: 0;
padding-top: 5rem;
}

.form-banner-placement--right.form-banner .form-banner-wrapper:before {
position: absolute;
top: 0;
right: 9600rem;
left: 50%;
bottom: 0;
}

JSfiddle DEMO