Responsive Form on top of Responsive Image? - Boot

Question

I am trying to place a form on top of a Responsive Image, and I want to get the form to also be responsive and resize in relation to the image

Currently the image is responsive but I cannot get the form to be stick in one place on the image and resize in its same position

Is that possible?

Current Code: http://www.codeply.com/go/FFgsRfictx

Answer 1

The following is only correspond to your form section of the page you have provided.

I have removed the image element and used the resource link as the background-image of the form element. The form fields are wrapped with bootstrap classes.

a min-height has been set on the form element to prevent too much distortion of your background image.

Html:

<!--- bootstrap style sheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<!-- form section -->
<section id="contact class" class="container content-section text-center">

  <h1 class="brand-heading">Contact</h1>

  <div class="container-fluid">
    <div class="row">
      <!--- 
        under the grid system, one row has can have 12 columns 
        we'll use 3 columns on each side for spacing,
        6 columns for the form.

        the form is done the bootstrap way, less the validation.
        you need to add in hte missing fields yourself.
      --->
      <div class="col-md-3"></div>
      <div class="col-md-6">
          <form id="responsiveForm" action="">

            <div class="form-group">
              <label for="name">Name:</label> 
              <input type="text" class="form-control" id="name" name="name"/>
            </div>
            <div class="form-group">
              <label for="email">Email:</label> 
              <input type="text" class="form-control" id="email" name="email"/>
            </div>
            <div class="form-group">
              <label for="occasion">Occasion:</label> 
              <input type="text" class="form-control" id="occasion" name="occasion"/>
            </div>
            <div class="form-group">
              <input type="submit" name="submit" class="form-control btn btn-primary" value="go"/>
            </div>

            </div>
          </form>
        </div>
      <div class="col-md-3"></div>
    </div>
  </div>

</section>

Css:

#responsiveForm{
  background-image: url("http://s02.justpaste.it/files/justpaste/d233/a9446587/playingcardtemplate_small.png");
  background-size: cover;
  background-size: 100% 100%;

  min-height: 650px;
  padding: 80px;
  padding-top: 120px;
}

see it in Codepen

Edit: Just a bit of thought on image. if you want to use a background for your form. you should do up the form first, and find out the size of that form and shape up your image to that proportion.

Answer 2

Try like this:

.formOuterContainer {
  position: relative;
}    

.formInnerContainer {
  position: absolute;
  left: 72px;
  right: 72px;
  top: 80px;
  bottom: 84px;

  display: flex;
  align-items: center;
  justify-content: center;
}