이미지 위에 HTML 폼을 배치하는 방법

Question

휴대폰 이미지 위에 폼을 배치하고 싶습니다. 나는 내가 생각할 수있는 모든 것을 시도했다 (나는 HTML과 CSS에 익숙하지 않다). 여기

는 내가의 양식을 배치하려고 중간 전화 (아이폰)에,이 길함으로써 Image

내 작업 PicText.

에 대한 링크입니다.

유일한 HTML 조정했다 :

당신은 양식 주위 DIV에 클래스를 추가 할 수 있습니다

Answer 1

는 다음 이미지에 맞게 다음 폼의 크기와 위치를 조정합니다 .... 그 DIV에 background-image를 추가

<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에 클래스의 추가 형태는 수직으로 딱 맞는, 그래서 내가 뿐만 아니라 텍스트와 비밀번호를 입력에 CSS의 패딩과 마진을 조정

jsFiddle Demo

참고. 더 많은 세분화가 가장 바람직 할 수 있지만, 최소한이 작업을 시작해야합니다.

_{(개인 취향에 jsFiddle이고, 다른 사람은 가입이 필요합니다. 코드가 손실되지 않습니다 .. jsFiddle으로 내가 나하지에 서명 할 수 있습니다.)}