Как правильно изменить форму ввода и кнопку на фоновом изображении?

Question

Я пытаюсь создать текстовый виджет, который включает в себя форму ввода поверх фонового изображения в отзывчивой теме, использующей Twitter Bootstrap 2 для его рамки. Я пытаюсь позиционировать кнопку ввода и правильно контактировать с изображением. Сейчас он посередине, но я пытаюсь переместить его вниз и налево. Вот код, который я использую для виджета. Может кто-то, пожалуйста, помогите мне разобраться, как CSS добавить строку, чтобы переместить поле и кнопку? (Тогда я могу войти и настроить их, мне просто нужно выяснить, что мне нужно добавить, чтобы сделать это.) Спасибо!

<form style="-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center; padding: 25% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" <input type="text" style="width:200px;height:20px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/> 
   </p> 
   <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
   <input type="submit" value="Subscribe" /> 
</form> 

Я немного изменил код, так как я впервые разместил вопрос.

<form style="-webkit-background-size: cover;-moz-background-size: cover; 
-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center; 
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
   <p> 
       <input type="text" style="width:170px;height:18px;margin-bottom:-110px;margin-left:-125px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/> 
   </p> 
   <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
   <input type="submit" style="margin-bottom:-134px;margin-left:-220px;" value="Subscribe" /> 

Answer 1

Я предполагаю, что вы имели в виду нижний левый угол. В таком случае, пожалуйста, используйте это:

<form style="-webkit-background-size: cover;-moz-background-size: cover; 
-o-background-size: cover;background-size: cover;padding: 3px;text-align:  center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg)  no-repeat center; 
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<p> 
    <input type="text" style="width:170px;height:18px;float:left;margin-top:28%;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/> 
</p> 
<input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
<input type="submit" style="float:left;margin-top:28%;" value="Subscribe" />