ウェブ上に掲載する入力フォームで「複数行の長い文章」を入力させるには、textarea要素を使って作る「テキストエリア」があります。このテキストエリアは、代表的なブラウザではただ真っ白な背景色で指定の行数・文字数分の空間が表示されるだけです。しかし、このテキストエリアにはスタイルシートを使って背景画像を加えることもできます。

例えば、以下のような感じです。下記のボックス内には2つのテキストエリアがあり、最初のはデフォルトのまま(たいていは無地の白色背景で表示されます)、次のには背景画像として淡い風景写真(富良野の平原)を加えています。

上記の2つ目のテキストエリアの背景には写真が表示されているはずです。入力時に文字が見にくくならないよう、かなり薄めに加工した写真を使っています。ちなみに、この背景画像だけを単独で表示すると、以下のように見えます。横幅420px・高さ178pxの画像です。

この画像を、テキストエリアの背景画像として表示させています。

テキストエリアの背景に画像を掲載するCSSソース

上記のサンプルのような表示を実現するCSSソースは下記の通りです。

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

以下に簡単にソース内の記述の意味を解説しておきます。

3行目：background-image

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

4行目：background-repeat

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

5行目：background-position

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

※ここでサンプルとして使用した背景画像は中央を基準にして描画させる方が自然なので上記のように指定しました。もし、左上を基準にする方が自然な画像なら「top left」と指定すれば良いでしょう。(もっとも、デフォルトの値が「top left」なので、その場合は無指定でも構いませんが。)

7～8行目：width, height

widthプロパティとheightプロパティは、テキストエリア自身の横幅と高さを指定しています。ここでは、300×150ピクセルサイズにしていますが、任意の大きさにできます。「10em」（＝10文字分）のように、相対的なサイズで指定する方が好ましいのですが、ここではサンプルの画像をうまく見せるためにピクセル数で指定しました。

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

テキストエリアに表示する背景画像のサイズを、テキストエリアの表示面積に合わせる

さて、先程のサンプルでは「テキストエリアの縦横サイズ」を「背景画像のサイズ」に合わせました。画像が420×178(px)なので、テキストエリアのサイズはそれが充分表示される300×150(px)にしたわけです。……が、複数の異なるサイズのテキストエリアに同じ背景画像を適用したい場合などは、この方法では困る可能性があります。むしろ、「背景画像のサイズ」の方を「テキストエリアの面積」に合わせて拡大縮小させられる方が便利です。

そのような場合は、background-sizeプロパティを併用すると簡単です。下記の表示例には3つの(サイズの異なる)テキストエリアがあります。どれにも同じ背景画像が掲載されていますが、写真のサイズが異なっている(テキストエリアのサイズに合わせて拡大縮小されている)ことが分かります。

上記の3つのテキストエリアに表示されている背景画像は、どれも「テキストエリア全体を覆える最小サイズ」に自動調整されています。
このように、背景画像の拡大率を自動調整させる方法はとても簡単で、下記のCSSソースのようにbackground-sizeプロパティを加えるだけです。

textarea {
   /* ▼背景画像の指定 */
   background-image: url("furanofield.jpg");
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
}

background-sizeプロパティに値「cover」を指定すると、background-imageプロパティで指定された画像を、「描画領域全体を覆える最小サイズ」にまで拡大または縮小して表示されます。画像の表示サイズを自力で調整する必要がないのでとても楽です。

なお、このbackground-sizeプロパティに関しては、All Aboutで公開した記事「1枚の背景画像をブラウザの画面全体に広げる方法」でも解説していますので併せてご参照下さい。

(更新日：2016年02月01日)