つれづれ日記

２０１１年４月１日～８月１５日まで育児休業を取りしました。この期間の生活を日記のまとめです。また、育児休業期間が終わったので、他にも挑戦しているものや日常のメモなどもこの日記に載せようと思います。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

(X)HTML,CSS覚書
～背景画像の設定について～

　とりあえず、まずは例文から。

h2 {
    background-image: url(../image/bar.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
}

　これはｈ２に対する設定であることは説明しないでもわかると思います。
　ですので、{　}内に書かれた部分の説明です。

☆background-imageプロパティは、どの画像ファイルを背景画像にするかを指定するプロパティです。次に指定しているアドレス(url・・・)の画像を背景画像として使うということを指定しています。

　url(../image/bar.gif)は、画像ファイルがあるフォルダーと画像ファイル名です。

　『..』というのは、一つ前（上位）のという意味です。何の一つ前かというと、この文章が書かれたＣＳＳファイルがあるフォルダーを基準として、一つ前のフォルダーに戻るという意味です。

　次の『/image/bar.gif』ですが、これはimageフォルダー内にあるbar.gifという画像ですということです。

　つまり、『../image/bar.gif』というのは、一つ前に戻ったところにある、imageフォルダー内にあるbar.gifファイルということです。

　何度も書きますが、基準はＣＳＳファイルがある場所です。その場所から、どういう位置にファイルが置かれているのかを指定してください。

☆background-repeatプロパティは、画像ファイルの繰り返し表示を指定するプロパティです。
　このプロパティの値は４種類指定されています。
・repeat-x     横方向に繰り返す
・repeat-y     縦方向に繰り返す
・repeat        縦横両方に繰り返す
・no-repeat 繰り返しをしない

☆background-positionプロパティは画像ファイルの表示開始位置を指定するプロパティです。用意された値と任意に数値の両方に対応しており、非常に細かい調節ができます。

　用意された値は「top」「right」「bottom」「left」「center」の５つです。
　任意の数値は％やｐｘ（ピクセル）といった単位を使って数字で指定します。

　位置の指定は「left top」のように「横方向　縦方向」の順番で記述します。例えば「10px 5px」と記述した場合には、「左から１０ｐｘ　上から５ｐｘ」という位置になります。

　こまめに試しながらようすを見た方が良さそうですね。

[0回]