Как разместить Html-форму над изображением

Question

Я хотел разместить форму поверх изображения мобильного телефона. Я пробовал все, что мог придумать (я новичок в html и Css).

Вот ссылка на мою работу PicText.

Это Image

Кстати, это на среднем телефона (Iphone) Я пытаюсь поставить форму на.

Answer 1

Вы можете добавить класс к DIV вокруг формы, а затем добавить к этому background-image DIV .... затем настроить размер и положение формы, чтобы подогнать изображение:

Единственная корректировка HTML был добавление класса ниже DIV:

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

jsFiddle Demo

Обратите внимание, что я отрегулировать что ваш CSS отступы и поля на текстовые и пароль входа, а поэтому форма будет соответствовать вертикально. Скорее всего, требуется уточнение, но это должно по крайней мере начать.

_{(Личные предпочтения jsFiddle, другие просто требуют зарегистрироваться в ней. С jsFiddle я могу выбрать, чтобы войти или нет .. код не теряется.)}