WordPress のサイドバーのドロップダウンをお洒落にカスタマイズするため背景画像について調べていたのですが、background-image などの使い方をよく知らなかったのでまとめてみました。
お借りした素材
無料で利用できる食べ物クリップアート素材集サイトさんからお借りしました。たくさんの種類の食べ物のイラストを揃えておられるので、いろいろ使い道があるのではないでしょうか。ご使用の際には利用規約をよく確認してください。
今回は私が今食べたい気分なのでカレーにしました。
background-color
画像の前に背景色の指定方法から。
1 2 3 | <div class="test"> カレーまたはカリーは、多種類の香辛料を併用して食材を味付けするというインド料理の特徴的な調理法を用いた料理に対し、欧米人が名付けた呼称。 </div> |
1 2 3 4 5 | .test { width: 200px; height: 100px; background-color: #E6FF35; } |
たまにカラーコードの先頭の＃を忘れて「うわっ、動作しねぇ・・・」と焦ったりしますのでご注意を。カラーコードですが、私はいつもこちらのサイトにお世話になっています。
background-image
背景に画像を指定します。わかりやすくするために border を使って枠線を指定しています。
1 2 3 4 5 6 | .test { width: 700px; height: 300px; border: 1px solid #CCC; background-image: url(../img/curry.png); } |
親要素の面積よりも画像が小さい場合、画像が繰り返し表示されます。一枚だけ表示したい場合には background-repeat を指定する必要があります。
background-repeat
画像の繰り返しパターンを指定するためのプロパティです。次の４通りの指定方法があります。
- repeat
- no-repeat
- repeat-x
- repeat-y
repeat
background-repeat プロパティの初期値になります。background-repeat をなにも指定しなければ repeat が指定されていることになります。先ほどのように繰り返し表示されます。
no-repeat
一枚だけ表示したい場合には no-repeat を指定してあげます。
1 2 3 4 5 6 7 | .test { width: 600px; height: 300px; border: 1px solid #CCC; background-image: url(../img/curry.png); background-repeat: no-repeat; } |
repeat-x
横方向にのみ背景画像を繰り返して表示します。
1 2 3 4 5 6 7 | .test { width: 700px; height: 300px; border: 1px solid #CCC; background-image: url(../img/curry.png); background-repeat: repeat-x; } |
repeat-y
縦方向にのみ背景画像を繰り返して表示します。
1 2 3 4 5 6 7 | .test { width: 500px; height: 500px; border: 1px solid #CCC; background-image: url(../img/curry.png); background-repeat: repeat-y; } |
background-position
背景画像の基本ですが、なにも指定しなければ画像は親要素の左上を原点として表示されます。位置を変更したければ background-position プロパティを指定します。
数値で指定
%、px、em、pt などを使って指定する方法です。左と上からどれだけ移動するかを指定します。
1 2 3 4 5 6 7 8 | .test { width: 600px; height: 300px; border: 1px solid #CCC; background-image: url(../img/curry.png); background-repeat: no-repeat; background-position: 250px 30px; } |
リピート設定した画像に対しても指定可能です。
1 2 3 4 5 6 7 8 | .test { width: 600px; height: 300px; border: 1px solid #CCC; background-image: url(../img/curry.png); background-repeat: repeat-x; background-position: 0 100px; } |
キーワードで指定
横方向の指定を left、center、right、縦方向の指定を top、center、bottom のキーワードを使って指定することが可能です。
1 2 3 4 5 6 7 8 | .test { width: 600px; height: 300px; border: 1px solid #CCC; background-image: url(../img/curry.png); background-repeat: no-repeat; background-position: right center; } |
当然、リピート設定した画像に対しても指定可能です。
1 2 3 4 5 6 7 8 | .test { width: 600px; height: 300px; border: 1px solid #CCC; background-image: url(../img/curry.png); background-repeat: repeat-x; background-position: bottom; } |
background-attachment
スクロールをしたときに背景画像をどうするかを指定することができます。scroll と fixed を指定することができ、fixed を指定すると画面がスクロールされても背景画像が固定されます。
実はまとめて指定できるんです。
背景画像について細かく設定するとスタイルシートの記述が増えてしまったように感じるかもしれませんが、実はまとめて一括で指定することが可能です。
1 | background: #92F200 url(../img/curry.png) no-repeat right 120px; |
うーん、すっきり。
いらないものは省略可能です。よく順不同であると説明されますが、座標を数値指定する場合だけは左→上の順番を守らないと、期待した場所へ配置できないので注意してください。
Comment