画像上にHtmlフォームを配置する方法

Question

携帯電話の画像にフォームを配置したかったのです。私は考えることができるすべてを試みました（私はhtmlやCSSには新しいです）。ここで

が私の仕事へのリンクPicText.

これはところで Image

であり、それは私が上のフォームを配置しようとしています中央の携帯電話（iPhoneの）です。

Answer 1

あなたはその後、その後、イメージに合うように、フォームのサイズと位置を調整....そのDIVにbackground-imageを追加し、フォームの周りのdivにクラスを追加することができます

のみHTML調整されました

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

エッセンシャル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 */ 
} 

：以下のdivのクラスの追加

jsFiddle Demo

I テキストとパスワードの入力であなたのCSSのパディングとマージンを調整するだけでなくので、フォームが垂直方向に収まるように注意してください。より洗練されたほうが望ましいでしょうが、少なくともこれはあなたを始めるはずです。

_{（個人の好みがjsFiddleで、他の人がちょうどサインアップが必要です。jsFiddleで、私は、コードが失われない...サインインするかどうかを選択することができます。）}