Border Image Bootstrap

Question

J'essaie d'utiliser un iphone frame png comme une bordure sur un formulaire, mais je ne peux pas le comprendre. Voici ci-dessous .html et .css à ce point. Comme vous le verrez, j'ai essayé avec la vidéo comme image de fond et comme objet séparé.

Voici le cadre que nous essayons d'utiliser: iPhone Frame

Voici comment nous avons maintenant (c'est le formulaire à droite w/dans le 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>

Je suis confiant que la réponse est border-image, mais ça ne marche pas pour moi.

Je voudrais savoir s'il existe un moyen de placer le fichier image au-dessus de l'élément de formulaire.

Merci pour votre aide!

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>

Vous cherchez quelque chose comme ça ??