Отзывчивая форма внутри Div с отзывчивым фоном

Question

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

Я считаю, что это связано с позициями, которые я им дал. Я ищу способ, чтобы они масштабировались вместе независимо от размера экрана.

CSS:

<style> 
      #optin-bg{ 
       max-width: 799px; 
       min-height: 310px; 
       height: auto; 
       background-image: url(http://placehold.it/799x310.png); 
       background-repeat: no-repeat; 
       background-size:contain; 
       background-position:center; 
       overflow: hidden; 
      } 

      #optin-form{ 
       position:absolute; 
       top: 50%; 
       left: 10%; 
      } 

      #email-input{ 
       margin-bottom:10px; 
      } 
     </style> 

HTML:

<div class="container-fluid"> 
      <div class="col-md-6 col-md-offset-2" id="optin-bg"> 
       <div class="col-md-4 col-md-offset-3" id="optin-form"> 
       <input type="email" class="form-control" id="email-input" placeholder="Email"> 
       <button type="submit" class="form-control" id="email-submit" >Submit</button> 
       </div> 
      </div> 
    </div><!-- /.container --> 

http://jsfiddle.net/f07y6xkx/

Answer 1

Я был в состоянии решить эту проблему с множественными запросами средств массовой информации и сбросить размер/положение формы. Легко, немного грязно, исправить.

Например:

@media(min-width: 768px){ 
     #optin-bg { 
      background: url("optin_image_2.png") no-repeat scroll 0 0/100% auto rgba(0, 0, 0, 0); 
      min-height: 310px; 
      max-width: 550px; 
     } 
     #optin-form{ 
      width: 40%; 
      top: 120px; 
      left: 5px; 
     } 
    } 
    @media(min-width: 992px){ 
     #optin-bg { 
      min-height: 310px; 
      max-width: 699px; 
     } 
     #optin-form{ 
      width: 30%; 
      top: 150px; 
      left: 10px; 
     } 
    } 

    @media(min-width: 1200px){ 
     #optin-bg { 
      min-height: 310px; 
      max-width: 799px; 
     } 
     #optin-form{ 
      top: 175px; 
      left: 10px; 
     } 

    }