背景画像の貼り付けと表示方法の設定

１から８ページの実習と９の感想などの課題レポート作成で十分に２コマ分を使い切ると思いますが、時間が余った生徒用に、このページを作りました。

このページでは、予備的な課題として『背景画像の貼り付けと表示方法の設定』について解説します。

次のＦＡＱのページに

　　ＦＡＱ(情報の発信１：Webページ作成関係)

『背景画像を縦または横に並べたい』

という解説ページを作ってあります。

ここに解説したように

body {
background-image:url('表示させたい画像ファイルのファイル名');
background-repeat:繰り返しの方法を指定;
}

と記述すると背景に画像（タイル上の比較的小さな画像）を貼り付け、横方向に繰り返し表示させたり、縦方向に繰り返し表示させたりできます。

また、

background-position:位置を指定;

で、表示位置を制御することができます。

example01.cssとmy_example01.cssのbodyタグ用のスタイルシート記述欄（『body {』と『}』の間）に、例えば次のように追加して下さい。

    background-image:url('../images/h_a019s.gif');
    background-position:right;
    background-repeat:repeat-y;

h_a019s.gifは画像ファイルの名前ですから、必要に応じて別の画像を設定して下さい。
尚、既に何度かお話ししていますが、『../images/』という部分（少し、文字が小さすぎて見にくいので全角で表現すると『．．/images/』です。但し、正しくは全て半角文字で記述することになっているので実際に記述するときは半角で書いて下さい）は『ひとつ上のフォルダ』を意味します。

つまり、CSSファイルが保存されている『css』というフォルダから見て、その一つ上のフォルダを指し示しています。

結果的に、上の３行のうち１行目に書かれていることは『css』というフォルダから見て、その一つ上のフォルダである『css_lesson』というフォルダ内にある『images』フォルダの中に保存されている『h_a019s.gif'』という画像ファイルを表示して下さいという意味になります。

２行目は文字通り、右端に表示

３行目はｙ軸方向（つまり、縦方向）に繰り返し表示

という設定になります。

background-positionの値はrightの他に、left、top、bottomが設定できます。

また、 background-repeatの値はrepeat-yの他に、repeat-x（横方向に繰り返し表示）、repeat（縦横全てに繰り返し、画面一杯に画像を表示、これが標準設定）、no-repeat（繰り返しはせずに１回だけ表示）を設定できます。

いろいろと変更して試してみて下さい。

戻る