Wie Sie ein HTML-Formular über ein Bild platzieren

Question

Ich wollte ein Formular über ein Handy-Bild platzieren. Ich habe alles versucht, was ich denken konnte (ich bin neu in HTML und CSS). Hier

ist ein Link zu meiner Arbeit PicText.

Dies ist die Image

By the way, ist es auf dem mittlere Telefon ist (das Iphone) ich auf die Form zu bringen versuchen.

Answer 1

Sie eine Klasse zum div um das Formular hinzufügen können, dann ein background-image zu diesem div hinzuzufügen .... dann die Größe und Position des Formulars stellen Sie das Bild zu passen:

Die einzige HTML-Einstellung war die Zugabe der Klasse des div unter:

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

wichtig 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 */ 
} 

jsFiddle Demo

Bitte beachte, dass ich Sie die CSS-Polsterung angepasst und die Margen auf Ihren Text und Passworteingaben und so die Form vertikal passen würde. Mehr Verfeinerung ist höchstwahrscheinlich erwünscht, aber das sollte dir zumindest den Einstieg erleichtern.

_{(persönliche Präferenz ist jsFiddle, die andere benötigen nur eine Anmeldung. Mit jsFiddle kann ich wählen oder nicht zu unterzeichnen .. der Code nicht verloren.)}