Border Image Bootstrap

Question

Ich versuche, ein iPhone Frame Png als Grenze auf einem Formular zu verwenden, kann es aber nicht herausfinden. Unten ist .html und .css zu diesem Punkt. Wie Sie sehen werden, habe ich mit dem Video als Hintergrundbild und als separates Objekt versucht.

Hier ist der Rahmen wir versuchen, zu verwenden: iPhone Frame

Hier ist, wie wir es jetzt haben (es ist das Formular rechts w/in der 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>

Ich bin mir sicher, die Antwort ist Border-Image, aber es funktioniert nicht für mich.

Ich würde gerne wissen, ob es eine Möglichkeit gibt, die Bilddatei über das Formularelement zu legen.

Danke für Ihre Hilfe!

Answer 1

Codepen Link

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

 
#iphoneframe { 
 
    background-repeat: none; 
 
} 
 

 
#landform { 
 
    background-image: url("https://i.stack.imgur.com/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>

Suchen Sie so etwas wie ??