ホームページ

コピーして作る、HTML+CSS

スタイルシート

背景画像の設定を追加する


実際のＣＳＳファイル （背景画像の固定を除く）
　下記のこのの部分を、追加します。
　{ と } の間で、他の設定をぶったぎらなければ、どこに追加しても、かまいません。 　背景の色がすでに設定されている場合、背景画像で隠れて見えなくなります。
　けれど、文字が見やすい背景色の設定を残しておくと、いろいろと便利です。
/*** ******************************************************** ***/
/*** ｂｏｄｙ（全体） */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値＋単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 背景の画像 ***/
background-image:url(test.jpg); /* 画像あり:ファイル名 画像なし:none*/

/*** 背景画像の並べ方 ***/
background-repeat:repeat;
/* 全面:repeat , 横一列:repeat-x , 縦一列:repeat-y , 一つ:no-repeat */

/*** 背景画像の位置 ***/
background-position:left top;
/* 上:top , 下:bottom , 中央:center , 左:left , 右:right */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の種類 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓ ｐゴシック */
/* ｍｓ 明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体 など */

} /*** ｂｏｄｙ（全体）の定義 おわり ***/

背景を用意する

　上のスタイルシートだけでは、もちろん背景画像は表示されません。
　背景画像が必要です。
　このスタイルシートは、test.jpg という名前のjpg形式の画像ファイルを使うように、設定してあります。
　下の画像を選択し、ＨＴＭＬファイルやスタイルシートと同じ場所に、test.jpgという名前で保存してから、ＨＴＭＬファイルを表示してください。
　背景画像が、表示されます。
　保存するとき、ファイルの名前は変えても大丈夫ですが、画像の形式を現す jpg gif といった拡張子を変えてはいけません。

　背景を替える時には、背景画像を取り替えてしまうと簡単ですが、それでは同じｊｐｇ形式の画像(****.jpg という名前の画像)にしか替えられません。
　背景画像は、スタイルシートの背景の画像の設定のこの部分で設定しています。
　複数の画像を別の名前で用意しておいて、ファイル名を書き換えるといいでしょう。
/*** 背景の画像 ***/
background-image:url(test.jpg); /* 画像あり:ファイル名 画像なし:none*/

/*** 背景画像の並べ方 ***/
background-repeat:repeat;
/* 全面:repeat , 横一列:repeat-x , 縦一列:repeat-y , 一つ:no-repeat */

/*** 背景画像の位置 ***/
background-position:left top;
/* 上:top , 下:bottom , 中央:center , 左:left , 右:right */

背景の並び方


repeat-x
横一列
repeat-y
縦一列
no-repeat
一つ
　背景を全面にではなく、一部に使いたい場合は、並び方を指定します。
　下記の、この部分を書き換えます。
　repeatであれば、上下左右に繰り返し表示され、全面に並びます。
　repeat-xであれば、左右に繰り返され、横一列に並びます。
　repeat-yであれば、上下に繰り返され、縦一列に並びます。
　no-repeatbであれば、繰り返されず、一つだけ表示されます。
/*** 背景の画像 ***/
background-image:url(test.jpg); /* 画像あり:ファイル名 画像なし:none*/

/*** 背景画像の並べ方 ***/
background-repeat:repeat;
/* 全面:repeat , 横一列:repeat-x , 縦一列:repeat-y , 一つ:no-repeat */

/*** 背景画像の位置 ***/
background-position:left top;
/* 上:top , 下:bottom , 中央:center , 左:left , 右:right */

背景の位置


left top
左上
center top
中央上
right top
右上

left center
左中央
center
中央
right center
右中央

left bottom
左下
center bottom
中央下
right bottom
右下
　背景をどこから並べ始めるかを、指定します。
　下記の、この部分を書き換えます。
　topは、一番上。bottomは,一番下。
　leftは左で、rightは右です。
　centerは、中央です。
/*** 背景の画像 ***/
background-image:url(test.jpg); /* 画像あり:ファイル名 画像なし:none*/

/* ファイル名 */

/*** 背景画像の並べ方 ***/
background-repeat:repeat;
/* 全面:repeat , 横一列:repeat-x , 縦一列:repeat-y , 一つ:no-repeat */

/*** 背景画像の位置 ***/
background-position:left top;
/* 上:top , 下:bottom , 中央:center , 左:left , 右:right */
　並べ方がrepeat（全面）の場合でも、位置をcenter（中央）にしておくと、背景が中央そろいになります。

left top
左上から
center
中心から

背景を固定する

背景画像を固定していないページ
背景画像を固定したページ
　内容をスクロールしても、背景画像が動かないようにします。
　下記のこのの部分を、bodyの設定に、加えます。
/*** 背景画像の固定 ***/
background-attachment:fixed;