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

    How to refactor an existing project to use Compass?

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to create a button with overlapping Ribbon Shape in CSS?

    How to display thumbnail in dropdown CSS list along with other styling of text

    How to center an overflowing image inside of a constraining div

    jQueryUI tabs mouseover a disabled link, how do I change the cursor so it doesn't appear clickable?

    twitter bootstrap - how to skip a line?

    How to make an infinite horizontal container with fixed height

    How to wrap UL list - LIs on new line with css

    How to make a ghost element in CSS?

    How do I align elements using CSS?

    How to set dynamic value in css? [closed]

    How does floating and clearing on the same element work?

    How do i cover the image on navbar as well?

    Hide/Show table in my Email with the use of a button

    how to position divs within another div

    How to place two divs next to each other -HTML/CSS

    How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

    How to check if an element has a hover property and do something to another element in css [closed]

    SVG, how to evaluate the property of the svg object

    How to change where a CSS transition starts from?

    HTML/CSS slideshow without javascript

    CSS - want to remove a blank space but have no idea how to get rid of it?

    How to position divs inline with same spacing

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How can I change styling and test for every page reload [closed]

    CSS Shadows (how to get rid of top shadow?)

    How can I code CSS to make Table like?

    I created a jQuery slideshow but it keeps repeating the same image

    CSS - How to move an absolutely positioned item relatively to its current position