現在地: Home » 初級ホームページ作成講座：目次 » 背景に関する指定
背景に関する指定
このページでは、初心者でも比較的使いやすいものだけを抜粋しています。また、スタイルシートの指定に関しては「外部CSS」に記述しているものとします。その他の記述方法は「スタイルシートの定義方法」を参照して下さい。
- 背景色を指定する/background-color
- 背景画像を指定する/background-image
- 繰り返し/background-repeat
- 背景画像の位置/background-position
- 背景画像の固定/background-attachment
背景色を指定する/background-color
ページ全体、テーブル、セル、ボックス、<h1>等すべてのタグに使えます。
ページ全体（壁紙）の指定
では背景を【#ffdfef】（薄いピンク）に指定します。
body{background-color: #ffdfef;}
sample
その他タグの指定
次に見出しタグ<h1>に指定します
h1{background-color: #ffdfef;}
見出しタグ<h1>
背景画像を指定する/background-image
背景に写真及び画像を使う場合です。ココではsample.gifという画像ファイルがあったと仮定して説明します。
body{background-image: url(sample.gif);}
sample
background-image:url(ファイル名.gif);、もしくは画像用のフォルダに保存していればbackground-image:url(フォルダ名/ファイル名.gif);と指定します。
上記の場合、画像は縦横に繰り返し表示されてます。以下では、画像の固定について説明します。
繰り返し/background-repeat
垂直方向に繰り返す/background-repeat: repeat-y
body{
background-image: url(sample.gif);
background-repeat: repeat-y;
}
sample
水平方向に繰り返す/background-repeat: repeat-x
body{
background-image: url(sample.gif);
background-repeat: repeat-x;
}
sample
下記の表は左・中央・右/上・中央・下方向の繰り返し設定のタグ一覧です。
| 垂直方向の位置 | タグ |
|---|---|
| 左側に繰り返す | background-image : url(画像のパス); background-repeat : repeat-y; background-position : left; |
| 中央に繰り返す | background-image : url(画像のパス); background-repeat : repeat-y; background-position : center; |
| 右側に繰り返す | background-image : url(画像のパス); background-repeat : repeat-y; background-position : right; |
| 水平方向の位置 | タグ |
|---|---|
| 上側に繰り返す | background-image : url(画像のパス); background-repeat : repeat-x; background-position : top; |
| 中央に繰り返す | background-image : url(画像のパス); background-repeat : repeat-x; background-position : center; |
| 下側に繰り返す | background-image : url(画像のパス); background-repeat : repeat-x; background-position : bottom; |
背景画像の位置/background-position
画像を左側・中央・右側それぞれについて指定します。今度は繰り返しはしないので、上記説明のbackground-repeat: repeat-●;の部分はbackground-repeat: no-repeat;と指定します。
背景画像を左上に固定する
body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left top; /* background-position: 0 0; */
}
sample
背景画像を左下に固定する
body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left bottom; /* background-position: 0 100%; */
}
sample
下記はそれぞれのサンプルです。
| 画像の配置 | タグ |
|---|---|
| 左・上 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: left top; もしくは background-position: 0 0; |
| 左・中央 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: left center; もしくは background-position: 0 50%; |
| 左・下 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: left bottom; もしくは background-position: 0 100%; |
| 中央・上 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: center top; もしくは background-position: 50% 0; |
| 中央・中央 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: center center; もしくは background-position: 50% 50%; |
| 中央・下 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: center bottom; もしくは background-position: 50% 100%; |
| 右・上 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: right top; もしくは background-position: 100% 0; |
| 右・中央 | background-image: url(画像のパス); background-repea : no-repeat; background-position: right center; もしくは background-position: 100% 50%; |
| 右・下 | background-image: url(画像のパス); background-repeat: no-repeat; background-position: right bottom; もしくは background-position: 100% 100%; |
キーワードによる指定の他に [px] [%] などもあり、こちらの方がより細かな設定が出来ます。
背景画像の固定/background-attachment
スクロールさせない
body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: right top; /* background-position: 100% 0; */
background-attachment: fixed;
}
sample
sample
sample
sample
sample
sample
sample
sample
sample
sample
sample
sample
高性能サーバ
低価格サーバ
無料ホームページスペース
