Отзывчивая форма поверх отзывчивого изображения? - Bootstrap

Question

Я пытаюсь поставить форму на вершине Отзывчивых изображений, и я хочу, чтобы получить форму, чтобы быть отзывчивой и размером по отношению к изображению

В настоящее время изображения реагирует, но я не могу получить форму, чтобы быть в одном месте на изображении и изменить размер в том же положении

Возможно ли это?

Текущий код: http://www.codeply.com/go/FFgsRfictx

Answer 1

Попробуйте так:

.formOuterContainer { 
    position: relative; 
}  

.formInnerContainer { 
    position: absolute; 
    left: 72px; 
    right: 72px; 
    top: 80px; 
    bottom: 84px; 

    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Answer 2

Ниже соответствуют только вашей форме части страницы, которую вы предоставили.

Я удалил элемент изображения и использовал ссылку ресурса в качестве фонового изображения элемента формы. Поля формы заполняются с помощью классов начальной загрузки.

минимальная высота была установлена ​​на элементе формы, чтобы предотвратить слишком большое искажение фонового изображения.

Html:

<!--- bootstrap style sheet --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 


<!-- form section --> 
<section id="contact class" class="container content-section text-center"> 

    <h1 class="brand-heading">Contact</h1> 

    <div class="container-fluid"> 
    <div class="row"> 
     <!--- 
     under the grid system, one row has can have 12 columns 
     we'll use 3 columns on each side for spacing, 
     6 columns for the form. 

     the form is done the bootstrap way, less the validation. 
     you need to add in hte missing fields yourself. 
     ---> 
     <div class="col-md-3"></div> 
     <div class="col-md-6"> 
      <form id="responsiveForm" action=""> 

      <div class="form-group"> 
       <label for="name">Name:</label> 
       <input type="text" class="form-control" id="name" name="name"/> 
      </div> 
      <div class="form-group"> 
       <label for="email">Email:</label> 
       <input type="text" class="form-control" id="email" name="email"/> 
      </div> 
      <div class="form-group"> 
       <label for="occasion">Occasion:</label> 
       <input type="text" class="form-control" id="occasion" name="occasion"/> 
      </div> 
      <div class="form-group"> 
       <input type="submit" name="submit" class="form-control btn btn-primary" value="go"/> 
      </div> 

      </div> 
      </form> 
     </div> 
     <div class="col-md-3"></div> 
    </div> 
    </div> 

</section> 

Css:

#responsiveForm{ 
    background-image: url("http://s02.justpaste.it/files/justpaste/d233/a9446587/playingcardtemplate_small.png"); 
    background-size: cover; 
    background-size: 100% 100%; 

    min-height: 650px; 
    padding: 80px; 
    padding-top: 120px; 
} 

увидеть его в Codepen

Edit: Просто немного мыслей на изображении. если вы хотите использовать фон для своей формы. вы должны сначала разобрать форму и узнать размер этой формы и сформировать свой образ для этой пропорции.