Responsive Form On Top Of Responsive Image? - Bootstrap

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

Solution 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 --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"rel="stylesheet" /><!-- form section --><sectionid="contact class"class="container content-section text-center"><h1class="brand-heading">Contact</h1><divclass="container-fluid"><divclass="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.
      ---><divclass="col-md-3"></div><divclass="col-md-6"><formid="responsiveForm"action=""><divclass="form-group"><labelfor="name">Name:</label><inputtype="text"class="form-control"id="name"name="name"/></div><divclass="form-group"><labelfor="email">Email:</label><inputtype="text"class="form-control"id="email"name="email"/></div><divclass="form-group"><labelfor="occasion">Occasion:</label><inputtype="text"class="form-control"id="occasion"name="occasion"/></div><divclass="form-group"><inputtype="submit"name="submit"class="form-control btn btn-primary"value="go"/></div></div></form></div><divclass="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.

Solution 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;
}