"CSS Tips Factory" : Presented by Nishishi via WordPress.

テキストエリアの背景に画像を表示する [フォーム, イメージ]

フォームで複数行の文章を入力させるには、テキストエリア(textarea)を使います。代表的なブラウザでは、ただ真っ白な背景色で指定の行数・文字数分の空間ができます。このテキストエリアの背景には、スタイルシートで画像を表示することも可能です。

例えば、以下のような感じで。

上記のテキストエリアの背景には、富良野の平原の画像が表示されているはずです。文字を入力する際に見にくくならないよう、かなり薄めに加工した写真を使っています。
画像だけ表示すると、以下のようなもの。

テキストエリアの背景に表示する画像(写真)

この画像を、テキストエリアの背景画像として表示させています。
同時に、背景画像よりもテキストエリアの表示面積が広くても繰り返して表示しないようにし、スクロールしても背景画像が動かないように固定しています。

これを実現するスタイルシートソースは下記の通り。

textarea {
   /* 背景画像の指定 */
   background-image: url("furanofield.jpg");
   background-repeat: no-repeat;
   background-position: top center;
   /* テキストエリアのサイズ */
   width: 400px;
   height: 150px;
}

background-imageプロパティで背景画像のURLを指定します。ここでは、「 furanofield.jpg 」というファイルを指定しています。ページと同じディレクトリ(フォルダ)に画像があるならこのままで構いませんし、他のディレクトリにあるなら、相対パスや絶対パスでディレクトリ名を含めて記述します。

background-repeatプロパティは、背景画像の繰り返し方法を指定するプロパティです。値に「no-repeat」を指定すると繰り返さなくなります。つまり、画像を1枚だけ(=1回だけ)表示します。(繰り返し表示してもおかしくならない画像なら、この記述はなくて構いません。)

background-positionプロパティは、背景画像の表示位置を指定するプロパティです。ここでは、値に「top center」と記述しているので、「(上下方向の)上端・(左右方向の)中央」を基準にして描画されます。

※背景画像として使っている写真に「中心」が存在するので、中央を基準にして描画させる方が自然なのでそう指定しています。もし、左上を基準にする方が自然なら、「top left」と指定すれば良いでしょう。(デフォルトで top left なので、その場合は無指定でも構いませんが…。)
widthプロパティとheightプロパティは、テキストエリア自身の横幅と高さを指定しています。ここでは、400×150ピクセルサイズにしていますが、任意の大きさにできます。「10em」(=10文字分)のように、相対的なサイズで指定する方が好ましいのですが、ここではサンプルの画像をうまく見せるために、ピクセル数で指定してみました。

ある程度、表示幅が異なってもうまく見えるような、広めの画像を用意しておくと良いでしょう。

備考: background-attachmentはナシで

なお、背景画像のスクロールを抑制する目的で「background-attachment」プロパティを使うのはマズいので注意が必要です。background-attachmentプロパティは背景画像のスクロール方法を指定するプロパティで、値に「fixed」を指定すると、固定して動かなくなります。しかし、この「固定」というのは、「ページそのもののスクロールに対して固定」という意味であって、「テキストエリア内のスクロールに対して固定」という意味ではありません。上記の場面でbackground-attachmentプロパティにfixedを指定すると、うまくテキストエリア内に背景画像が表示されない可能性が高くなります。(古いブラウザでは、誤解釈された結果、うまく表示されるのですが。)

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。