フォームに画像を入れる方法を教えて下さい。

質問

こんにちは。タイトルがわかりづらく申し訳ありません。
問い合わせフォーム等を画像に設定する方法を教えて欲しいのです。
わかりづらいので、こんな物ですというのを添付します

http://www.1stwebdesigner.com/inspiration/creative-contact-forms/
（1. Aterlier Detourや12. Xruizの様な形のものです）

フォームの枠も画像にしたいのですが
これはCSS等で行うものなのでしょうか？
参考になるURL等あれば教えて頂きたいです。宜しくお願い致します

回答No.1

t_ohta · ベストアンサー

基本的な考え方は、全体のイメージを背景画像に指定してしたブロック要素（divとか）をおき、その上にフォームのパーツを重ねていきます。（position:absolute;をパーツに指定して任意の位置に表示する）

フォームの枠も背景画像に仕込んでおき、フォームのパーツはborder-width: 0px; と指定すると背景画像の枠が、あたかも入力フォームの枠のように見えます。

お礼

なるほど！
背景画像を使って枠を消していたのですね！
思った以上に簡単でびっくりしました！ありがとうございます！

回答No.2

ORUKA1951

画像を読み込まない、あるいはスタイルシートを解除しても利用できるように、普通に<form>を書き、formないしコンテナブロックに背景を置いてrelativeとして、absoluteで各<input><select>などを配置する。

　簡単なので、それを説明しているサイトはないかも。

form{dispaly:block;width:400px;height:300px;position:relative;url()}
input,select,textarea{position:relative;border:none;}
input[name="name"],input[name="sex"]{top:10px;}
input[name="name"]{left:10px;}
input[name="sex"]{left:100px;}
とか・・