CSSパーツテンプレート

このサイトは、「初心者でも使えるCSSパーツテンプレート」を配布しています

テンプレート サイズ カラー 文字の設定 背景の設定 枠線の設定
 

  背景に関するスタイル

background-image:url(〜)

背景の画像を指定する

使用例

div { background-image: (img/image.gif) }

外部CSSファイルを使う場合の相対パスは、CSSファイルのある場所が基準になります。
上記の例の場合でいうとCSSファイルがある場所にimgというフォルダを作り、その中にimage.gifという画像ファイルを入れているといった具合です。

background-color

背景の色を指定する

使用例

body { background-color: #ffffff; }   p { background-color: silver; }

silverのように色の名前で指定してもいいですし#ffffffのように16進数で指定してもいいです。

background-repeat

背景画像の繰り返しを指定する

使用例

div { background-image: (img/image.gif) background-repeat: repeat-x; }

繰り返しを設定することにより横や縦に画像を伸ばすことが出来ます。


繰り返しを指定する値
repeat-x 横方向に並べます
repeat-y 縦方向に並べます
repeat 領域いっぱいに表示します
no-repeat 通常の画像サイズで表示します

background-position

背景画像の表示位置を指定する

使用例

div { background-position: right; }
h1 { background-repeat: repeat-x; background-position: center; }
div { background-repeat: no-repeat; background-position: 100px 20%; }

3つ目の例のように位置を表す指定を2つ指定すると最初に指定した方は横方向の指定、2番目に指定した方は 縦方向を指定します。1つだけの場合は、横方向の位置が指定され、縦方向は画面の中心に配置されます。

表示位置の値
横方向 left 左側に表示されます
center 中央に表示されます
right 右側に表示されます
縦方向 top 上に表示されます
center 中央に表示されます
bottom 下に表示されます

ピクセル指定・・・ピクセルで位置を指定した場合は、ページの左端から画像の左端、上端から 画像の上端までの距離が指定されます。
%指定・・・ 例えば20%で位置を指定した場合は、画像内の20%の位置がページの端から全体の幅の20%となるように指定されます。

background-attachment

スクロールを指定する

使用例

body { background-image: (img/image.gif) background-attachment: fixed; }

背景画像をスクロールしなく設定できます。通常は画面に合わせ背景もスクロールします。
このサイトもfixedを使って背景を固定しています。



Copyright © 2009 CSSパーツテンプレート All rights reserved.