How can I reposition an entry form and button correctly on a background image?


Tags: css,wordpress,css3,responsive-design

Problem :

I'm trying to create a text widget that includes an entry form on top of a background image within a responsive theme that is using Twitter Bootstrap 2 for it's framework. I'm trying to positon the entry button and contact from correctly on the image. Right now it's in the middle, but I'm trying to move it down and to the left. Here is the code that I'm using for the widget. Can someone please help me figure out how what CSS to add inline to move the box and the button? (Then I can go in and tweak them, I just need to figure out what I need to add to do it.) Thanks!

<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>

I've changed a bit of the code since I first posted the question.

<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" />


Solution :

I assume you meant to the bottom left corner. If so please use this:

<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" />

    CSS Howto..

    Clickable dropdowns - How do they work?

    CSS - How do I center a loading icon on a page that contains an iframe?

    How to stop loading pdf on mobile device?

    How to prevent divs from overlapping?

    How to disable the collapsing feature in twitter bootstrap 3?

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How to change the css of color of select2 tags?

    How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?

    webkit animation play state: how to start/stop animation on demand with javascript

    How to apply CSS rotate transition around glyph's vertical middle or centerpoint

    How to update element.styles css

    How to toggle overlay with no body scroll using the same button / div

    Duplicated footer html/css on another page, but shows up differently?

    CSS How to center link elements within a div

    How can I fit the iframe height at 100%?

    How to add custom code to specific
  • s in wordpress while building navigation?
  • How to work with Action Link when using CSS

    How do you properly apply hover css to
  • elements with list-style-type: none?
  • How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    How do i make li active in angularJS?

    How to let a div behave like another div?

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    How could i make CSS apply to all in a div?

    Show all text document

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How to put the hover image above the original image

    How to swap class / id using jquery in a css list?

    how to select one element in jQuery

    How to target certain text to make bold using css

    How do I implement a MailChimp API form embed?