Question

I am trying to position some text within a div which contains a background image. How do I go about with this. The site has to be responsive. Something like the right section on this site. http://loveandluxesf.com/

So this is the following code.

<div class="row">
    <div class="six columns" id="signup-section">
      <div id="bg-img">
        <div class="offset-by-two">
         <h2>Random text which should go in here</h2>
          <form>
            <input type="email">
            <span class="button">Register</span>
          </form>
        </div>
      </div>
    </div>

bg-img contains a background image which is centered. I want the text and the form to fit exactly inside the image. And this should work across multiple resolutions.

Answer 1

If you relatively position your containing div, then absolutely position the text element (h1), you can use top left right bottom positioning to put the text where you like relative to the containing div. If you need more specifics just ask.