背景 ２

今回は背景画像の位置設定について

説明したいと思います。

前回で説明させたいただきましたように

背景には画像も使用することができます。

その画像の大きさによっては、

指定した範囲よりも小さくなることもあると思います。

その時に使うのが

background-repeat:★;

※★にはrepeat-x(縦方向の繰り返し)またはrepeat-y(横方向の繰り返し)

またはno-repeaat(繰り返しなし)、またはrepeat(縦横の繰り返し)のいずれか。



では実際に表示してみましょう

repeat-x	repeat-y	no-repeat	repeat
q

となります。



背景画像を配置する位置も上記①～⑨の場所に設定できます。

①	②	③
④	⑤	⑥
⑦	⑧	⑨

①style="background-potision:top left;

②style="background-potision:top center;※center省略可

③style="background-potision;top right;

④style="background-potision:center left;※center省略可

⑤style="background-potision:center center;※centerは1つで可

⑥style="background-potision:center right;※center省略可

⑦style="background-potision:bottom left;

⑧style="background-potision:bottom center;※center省略可

⑨style="background-potision:bottom right;

要素が2つはいる場合は半角スぺ―スが必要です。

タグ：CSS so-net ブログ カスタマイズ 背景