戻る

背景画像の大きさの調節

CSS3のbackground-sizeプロパティを利用すると、背景画像の大きさを調節することができます。そのため、画像を作り直さなくても、ページのデザインに合わせて大きさを調節して表示することができます。ここでは、次のように150×150ピクセルの円を描いた画像(circle.png)を用意し、記事のヘッダー部分に合わせて大きさを調節します。

円を描いた画像
circle.png
(150×150ピクセル)。

画像(circle.png)は白色の部分を透過し、24bitの透過PNGとして保存してあります。

円を描いた画像(circle.png)を背景画像として表示したもの。

大きさを調節した時の表示。


Internet Explorer 8以下はbackground-sizeに未対応です。Internet Explorer 8以下にも対応する場合は大きさの調節を必要としない画像を用意します。

inserted by FC2 system