twitter-bootstrap forms frame border-image

Border Image Bootstrap

I am trying to use an iphone frame png as a border on a form, but cannot figure it out. Below is .html and .css to this point. As you will see I have tried with the video as a background image and as a separate object.

Here is the frame we are trying to use: iPhone Frame

Here is how we have it now (it is the form on the right w/in the jumbotron): Form Screenshot

HTML

    #phoneform {
      float: right;
      border-image: url(/assets/images/iphone-frame-white.png);
      border: 10px solid transparent;
      padding: 25px;
    }
    #iphoneframe {
      background-repeat: none;
    }
    
    #landform {
      background: white;
      width: 360px;
      padding: 40px;
      text-align: center;
      margin-top: 105px;
      margin-left: 15px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <!-- Signup Form -->
      <div class="container-fluid" id="phoneform">
        <div class="row">
          <div class="col-6">
            <!-- iPhone -->
            <!-- <img src="/assets/images/iphone-frame-white.png" id="iphoneframe"> -->
            <!-- Form -->
            <div class="float hidden-sm-down" id="landform">
              <h3><strong>Sign Up</strong></h3>
              <app-landing-form></app-landing-form>
              <div class="hidden-md-up"></div>
            </div>
          </div>
        </div>
      </div>

I am confident the answer is border-image, but it is not working for me.

I would like to know if there is a way to put the image file on top of the form element.

Thanks for your help!

Solution

Codepen Link

#phoneform {
  float: right;
  border: 10px solid transparent;
  padding: 25px;
}

#iphoneframe {
  background-repeat: none;
}

#landform {
  background-image: url("https://i.sstatic.net/pY82X.png");
  width: 418px;
  height: 855px;
  padding: 40px;
  border-radius: 70px;
  text-align: center;
  margin-top: 105px;
  margin-left: 15px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

h3 {
  position: relative;
  top: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="phoneform">
  <div class="row">
    <div class="col-sm-6">
      <!-- iPhone -->
    </div>
    <!-- Form -->
    <div class="col-sm-4 col-sm-offset-2">
      <div class="float hidden-sm-down" id="landform">
        <h3><strong>Sign Up</strong></h3>
        <app-landing-form></app-landing-form>
        <div class="hidden-md-up"></div>
      </div>
    </div>
  </div>
</div>

Are you looking for something like this??