ブログで背景画像を使うには

 WordPress のサイドバーのドロップダウンをお洒落にカスタマイズするため背景画像について調べていたのですが、background-image などの使い方をよく知らなかったのでまとめてみました。

お借りした素材

無料で利用できる食べ物クリップアート素材集サイトさんからお借りしました。たくさんの種類の食べ物のイラストを揃えておられるので、いろいろ使い道があるのではないでしょうか。ご使用の際には利用規約をよく確認してください。

今回は私が今食べたい気分なのでカレーにしました。

background-color

画像の前に背景色の指定方法から。

20161023_2_1

たまにカラーコードの先頭の#を忘れて「うわっ、動作しねぇ・・・」と焦ったりしますのでご注意を。カラーコードですが、私はいつもこちらのサイトにお世話になっています。

background-image

背景に画像を指定します。わかりやすくするために border を使って枠線を指定しています。

20161023_2_2

親要素の面積よりも画像が小さい場合、画像が繰り返し表示されます。一枚だけ表示したい場合には background-repeat を指定する必要があります。

background-repeat

画像の繰り返しパターンを指定するためのプロパティです。次の4通りの指定方法があります。

  • repeat
  • no-repeat
  • repeat-x
  • repeat-y

repeat

background-repeat プロパティの初期値になります。background-repeat をなにも指定しなければ repeat が指定されていることになります。先ほどのように繰り返し表示されます。

no-repeat

一枚だけ表示したい場合には no-repeat を指定してあげます。

20161023_2_3

repeat-x

横方向にのみ背景画像を繰り返して表示します。

20161023_2_4

repeat-y

縦方向にのみ背景画像を繰り返して表示します。

20161023_2_5

background-position

背景画像の基本ですが、なにも指定しなければ画像は親要素の左上を原点として表示されます。位置を変更したければ background-position プロパティを指定します。

数値で指定

%、px、em、pt などを使って指定する方法です。左と上からどれだけ移動するかを指定します。

20161023_2_6

リピート設定した画像に対しても指定可能です。

20161023_2_7

キーワードで指定

横方向の指定を left、center、right、縦方向の指定を top、center、bottom のキーワードを使って指定することが可能です。

20161023_2_8

当然、リピート設定した画像に対しても指定可能です。

20161023_2_9

background-attachment

スクロールをしたときに背景画像をどうするかを指定することができます。scroll と fixed を指定することができ、fixed を指定すると画面がスクロールされても背景画像が固定されます。

実はまとめて指定できるんです。

背景画像について細かく設定するとスタイルシートの記述が増えてしまったように感じるかもしれませんが、実はまとめて一括で指定することが可能です。

うーん、すっきり。

いらないものは省略可能です。よく順不同であると説明されますが、座標を数値指定する場合だけは左→上の順番を守らないと、期待した場所へ配置できないので注意してください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP