Teazzy1 Teazzy1 - 5 months ago 9
CSS Question

How to place an Html form over an Image

I wanted to place a form over a mobile phone image. I tried everything I could think of (I'm new to html and Css).

Here is a link to my work PicText

.


This is the
Image

By the way, it is on the middle phone(the Iphone) I am trying to place the form on.

Answer

You can add a class to the div around the form, then add a background-image to that div.... then adjust the size and position of the form to fit the image:

The only HTML adjustment was the addition of the class to the div below:

  <div class="formhold">
    <form method="post" action="action_page.php">

Essential CSS

.formhold {
  width: 600px; /* width of the image */
  height: 520px; /* height of the image */
  background: url(http://i.imgur.com/YUuTWwr.png?1) no-repeat center top;
}

form {
  display: block;
  width: 180px; /* width to use in the middle phone screen */
  margin: 0 auto; /* centers form over image */
  padding-top: 120px; /* moves form down from top of image */
}

enter image description here

jsFiddle Demo

Note that I adjusted your the CSS padding and margins on your text and password inputs as well so the form would fit vertically. More refinement is most likely desired, but this should at least get you started.

(Personal preference is jsFiddle, the others just require signup. With jsFiddle I can choose to sign in or not.. the code isn't lost.)

Comments