2011年7月7日木曜日

ブロック要素を新たに追加しないで画像に背景を付ける方法

スポンサーリンク

画像に背景を用いて何重かの枠線やテクスチャを施す場合。
通常は画像を包含するブロック要素を作り、そのブロック要素に背景画像をしていします。

今回の記事は、ブロック要素でimg要素を包含しない方法です。



準備


準備するタグは、imgのみ。
ごく普通にimg要素で画像を指定します。

必要に応じてclassを設定します。
通常、サイト内に使う画像の大きさはパターン化されていると思うので、そのパターンの分だけのclass名があれば楽になります。

背景画像の用意



img要素の背景にどのよう背景画像を配置するのかにもよりますが、基本的には上にくる画像のサイズを基本にします

例えば、三重枠線でimg要素を囲むような背景にしたい場合は、img要素のサイズで真ん中の位置にぴったりはまるように作成します。

単色の背景や、位置または方向が重要でない場合にはこの限りではありません。
単色であればbackground-colorで指定するだけですし、テクスチャであればある程度の広さを用意しておけば解決できます。

一般的な方法



img要素の背景に画像を敷く場合、一般的にはimg要素を包含するブロック要素を用います

例えば、img要素を<div>でくくります。
その<div>に背景画像を設定すれば、img要素の下に背景を敷く事ができます。

問題点としては、装飾のために不要なブロック要素を配置する必要がある点です。
無駄なものを全てなくさねばならないわけではないですが、無い方がシンプルで良いかと思います。
ソースも見やすくなりますし。

cssの設定




では、具体的な設定に。
htmlにはclassを設定するだけで、他はcssで行います。

cssの設定の流れは以下の通り。
まず、背景画像を設定したいimg要素をdisplay:block;でインライン要素からブロック要素に変更。
そのブロック要素に必要な分だけのpaddingを設定します。
最後は背景画像を敷いて、表示値をcenterで完了です。


img.example { 
display:block;
padding:13px;
background:#fff url(img/example.gif) no-repeat center center);
}


意図としては、imgをブロック要素の中身として扱い、paddingで領域を広げることで背景画像を表示させています。
centerでimg要素にしっかりはまる位置に背景画像を表示させているため、paddingを大きく広げても表示崩れはありません。

結び


ちょっとした小技的な内容でした。

装飾はしたいけど、余計な要素は増やしたく無い。
と言った場合の一手段として使えればと思います。

「使い方間違ってるよ」の場合はコメント頂ければ嬉しいです。
改善をしていきたいので。

スポンサーリンク

0 件のコメント :

コメントを投稿