Как разместить поле ввода поверх изображения

Question

У меня есть определенное поле как данные таблицы, которые я преобразовал из psd в html.

Изображение показано ниже ..

Часть кода html - это ...

<tr>
        <td colspan="13">
            <img src="images/WebDesign_32.png" width="1200" height="24" alt="" class="texxt"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>

Как получить текст сверху этого src="images/WebDesign_32.png" текста с помощью формы.

Answer 1

Попробуйте этот код

.form-wrapper {
  width: 400px;
  display:block;
  margin: 0 auto;
}

.form-wrapper .form-field {
  width: 100%;
  display: block;
  margin-bottom: 15px;
}

.form-wrapper .form-field label {
  display: block;
  float: left;
  min-width: 100px;
  font-weight: bold;
}

.form-wrapper .form-field input, 
.form-wrapper .form-field email, 
.form-wrapper .form-field textarea {
  width: 200px;
  background: #c9cdd7;
  border: none;
  line-height: 20px;
  margin-left: 20px;
  resize: none;
}

.form-wrapper .form-field .submit-btn {
  width:100px;
  float:right;
  background: #1949cb;
  font-weight: bold;
}

<div class="form-wrapper">
  <form>
    <div class="form-field">
      <label for="name">Name</label>
      <input type="text" />
    </div>
     <div class="form-field">
      <label for="email">Email</label>
      <input type="email" />
    </div>
     <div class="form-field">
      <label for="telephone">Telephone</label>
      <input type="text" />
    </div>
     <div class="form-field">
      <label for="message">Message</label>
      <textarea></textarea>
    </div>
    <div class="form-field">
      <input type="submit" class="submit-btn">
    </div>
  </form>
</div>