背景に画像をつける 背景画像   no comments

Posted at 4:15 pm in

ボックスの背景に画像を入れる事ができます。
文章のバックに好きな画像を入れたりするのに便利です。
画像は縦・横の繰り返して表示されますが、指定をすれば、縦だけ繰り返しや、横だけ、繰り返しをしない、を選べます。

background: url(http://www.future-japan.com/image/titleaka.gif) no-repeat;

これは、このサイトで使っているCSSの一部です。
ここでは、imageフォルダ内のtitleaka.gifをバック背景にし、画像の繰り返しをしない(no-repeat)にしています。

repeat 縦も横も画像を繰り返す
repeat-x 横一列だけ繰り返す
repeat-y 縦一列だけ繰り返す
no-repeat 繰り返さない
背景画像の位置を指定する事ができます。

例 background-position:left bottom;
(背景画像を左下に表示する)

left 左に寄せる
center 中央に寄せる
right 右に寄せる
top 上に寄せる
bottom 下に寄せる

Written by admin on 10月 26th, 2010