Como colocar meu formulário em cima de uma imagem em Css/html?

bons programadores de dia! Gostaria de perguntar se como posso fazer meu formulário aparecer em cima da minha imagem? O problema é que a minha forma aparece no fundo. Aqui está a imagem da minha imagem.

Screenshot of my Problem

Aqui estão os meus códigos:

HTML

<body>

    <div class="container" align="center">
      <div id="image">
        <img src="assets/img/imac.png" style="width:640px; height:678">
      </div>

    <div id="loginForm">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Please sign in</h3>
       </div>
         <div class="panel-body">
           <form accept-charset="UTF-8" role="form">
            <fieldset>
            <div class="form-group">
              <input class="form-control" placeholder="E-mail" name="email" type="text">
            </div>
            <div class="form-group">
             <input class="form-control" placeholder="Password" name="password" type="password" value="">
            </div>
            <div class="checkbox">
              <label>
                <input name="remember" type="checkbox" value="Remember Me"> Remember Me
              </label>
            </div>
          <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
          </fieldset>
          </form>
        </div>
      </div>
    </div>

   </div>

CSS

body {
background-color: #2ecc71;
}


.container {

width: 1000px;
height: 700px;
margin-top: 100px;
}

#loginForm{
width: 500px;
height: 400px;
}
 3
htmlcss
Author: God is good, 2014-12-20
Source

3 answers

Faz o #image ser position:absolute e enche o .container (que é feito position:relative) com ele.

body {
  background-color: #2ecc71;
}
.container {
  width: 1000px;
  height: 700px;
  margin-top: 100px;
  position:relative;
}
#loginForm {
  width: 500px;
  height: 400px;
  position:relative;
  z-index:10;
}

#image{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
}
<div class="container" align="center">
  <div id="image">
    <img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
  </div>

  <div id="loginForm">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Please sign in</h3>
      </div>
      <div class="panel-body">
        <form accept-charset="UTF-8" role="form">
          <fieldset>
            <div class="form-group">
              <input class="form-control" placeholder="E-mail" name="email" type="text">
            </div>
            <div class="form-group">
              <input class="form-control" placeholder="Password" name="password" type="password" value="">
            </div>
            <div class="checkbox">
              <label>
                <input name="remember" type="checkbox" value="Remember Me">Remember Me
              </label>
            </div>
            <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
          </fieldset>
        </form>
      </div>
    </div>
  </div>

</div>
 1
Author: Gabriele Petrioli, 2014-12-20 14:27:21

Crie um div do tamanho da imagem, e faça da imagem a imagem de fundo para o div.

Depois coloque um recipiente de div dentro deste div para a forma em si. Você pode então usar CSS para posicionar o formulário div usando margens.

<div id="image-container">
    <div id="form-container">
         // your form
    </div>
</div>

#image-container {
    width: 500px;
    height: 500px;
    background: url(/* your image */);
}
#form-container {
    width:350px;
    margin: 30px auto 0 auto;
 }

Obviamente, você precisa substituir os tamanhos com os da sua imagem real, e os valores de margem para fazer com que o seu conteúdo de forma se encaixe na tela do computador em sua imagem.

Isso deve funcionar, estou a codificar isto no meu telemóvel, por isso, peço desculpa. se eu perder algo trivial!
 1
Author: Lee, 2014-12-21 02:43:20
Usei o último exemplo e tornei-o mais simples. Basta ajustar para o tamanho da imagem e usar estofamento para posicionar o formulário. 
<div style="width:529px; height:220px; background-image:url('image.jpg')" align="center">
<div style="width:529px; padding: 165 0 0 0" align="center">
...form ...
<div>
<div>
 1
Author: Chris Mentzel, 2015-05-14 22:24:45