2012年8月29日水曜日

タイル画像を背景全体に敷き詰める

大き目の画像なら100×100px、小さめの画像なら10×10px~20×20pxでボーダーや格子柄の正方形画像を用意しましょう。ポイントはシームレス(つなぎ目がない)画像を準備することです。

画像のアップロード方法については、過去エントリーの

背景画像を指定する

をご参考ください。


今回追加するCSS
body{
background-image:url(画像URL);
background-repeat:repeat;
background-position:0% 0%;
/* 背景画像をリピート */}


注意点
・「/*」と「*/」の間のスペースは半角スペースです
・改行する直前がセミコロン(;)、文の途中はコロン(:)です
・{}の閉じ忘れにご注意を

��完成イメージ>
$書評×ビジネスモデル-タイル画像を背景にした完成イメージ
ちなみにこれは100×100pxで作ってます。ご参考になれば幸いです。

このイメージでつかってる画像です。こちらの画像のみ2次利用可としますので、よろしければお使いください。(商用利用でもどうぞ)

��余談>
色々背景をカスタマイズしたけど、やっぱり背景を削除したいということが出てくると思います。背景に関するCSSを削除しようにも、どこなのかわからない場合は以下のCSSを追加しましょう。

body{
background-image:none;
}

これで背景が無効になります。

0 件のコメント:

コメントを投稿