背景 backGround/css

背景色

背景(BG)画像

BG画像の並べ方

BG画像の表示位置

BG画像のｽｸﾛｰﾙ設定

背景の一括指定

ページの背景色を指定する(CSS)

backGround-color: #ffffff;

　このプロパティは、全てのタグ（要素）に適用できます。

　backGround-color は、背景色を指定するプロパティです。このプロパティを<body>タグ（要素）に設定すると、ページ全体の背景色を指定できます。

　 body { backGround-color: #ffffff; } .bgColor { backGround-color: #ffffff; }

プロパティ名	説　　明
backGround-color	背景色を指定（初期値は transparent）

※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。

　次のように transparent を指定すると、背景色に「透明」を指定したことになります。
backGround-color: transparent;

背景色を指定する場合は、文字色も同時に指定します（背景色だけを指定すると、ユーザーの環境によっては文字が見づらくなります）。

　★ 使用例とブラウザでの表示 (a1-1)スタイルシートの書き方（基本）は、こちらです。


設定例： body { backGround-color: lightpink; color: black; Padding: 4px; } .bgColor { backGround-color: ivory; color: black; Padding: 4px; }

使　用　例		ブラウザの表示

<body> 画面全体の背景色は lightpink です。 <div class=bgColor> ここの背景色は ivory です。</div> ここから lightpink に戻ります。 </body>		画面全体の背景色は lightpink です。ここの背景色は ivory です。ここから lightpink に戻ります。

※ 背景色の設定と「ブラウザの表示」欄の関係を分かりやすくするため、カラーネームと濃い色を使用しています。この設定例をコピーして使う場合は、薄い色のカラーコードを使用して下さい。
目安は #e0e0e0～#ffffff です（上位２桁が赤:R、中央の２桁が緑:G、下位２桁が青:B）。

※ Padding: は余白の指定で、文字の表示位置を調整する働きをしています。

関連するページ

CSS スタイルシート

：ボックスの背景色を指定する
CSS スタイルシート

：文字色を指定する

HTML タグページ

：ページの背景色とテキスト色を指定する

背景(BG)画像

ページの背景に画像を使う(CSS)

backGround-image: url(URI);

　このプロパティは、全てのタグ（要素）に適用できます。

　backGround-image は、背景画像を指定するプロパティです。このプロパティを<body>タグ（要素）に設定すると、ページ全体の背景画像を指定できます。

　body { backGround-image: url(back.gif); } .sName { backGround-image: url(back.gif); }

プロパティ名	説　　明
backGround-image	url(URI)…表示する画像ファイルを指定（初期値は none）

　【画像の指定方法】

　url( ) … ( ) 内に画像のURIを指定します。

　backGround-image: url(back.gif); … gifファイルを使うのが一般的です。写真を使う場合は、グレー
スケールタイプに変えるなど、本文が見やすいように配慮して下さい。

背景画像を表示できない閲覧者のために、同時に背景色を指定して下さい（背景画像が表示されない場合でも、文字が判別できるようにするため）。

　★ 使用例とブラウザでの表示 (a1-2)スタイルシートの書き方（基本）は、こちらです。


設定例： body { backGround-image: url(wall.png); color: black; Padding: 4px 10px; } .bgImg { backGround-image: url(ballPur.gif); color: black; Padding: 4px; }

使　用　例		ブラウザの表示

<body> 画面全体の背景画像は<br> wall.png です。 <div class=bgImg> ここの背景画像は<br> ballPur.gif です。 </div>ここから wall.png に戻ります。 </body>		画面全体の背景画像は wall.png です。ここの背景画像は ballPur.gif です。ここから wall.png に戻ります。

※ 背景画像の設定と「ブラウザの表示」欄の関係を分かりやすくするため、色濃い画像を使用しています。実際に使う背景画像は、大柄なものや薄い色のもの作成して下さい。

※ Padding: は余白の指定で、文字の表示位置を調整する働きをしています。

関連するページ

CSS スタイルシート

：ボックスの背景に画像を使う

HTML タグページ

：ページの背景に画像を使う

BG画像の並べ方

背景画像の並べ方を指定する(CSS)

backGround-repeat: repeat-X;

　このプロパティは、全てのタグ（要素）に適用できます。

　backGround-repeat は、背景画像の並べ方を指定するプロパティです。このプロパティを<body>タグ（要素）に設定すると、ページ全体の背景画像の並べ方を指定できます。

　body { backGround-image: url(back.gif); backGround-repeat: repeat-X; }
　.sName { backGround-image: url(back.gif); backGround-repeat: repeat-X; }

プロパティ名	値	説　　明
backGround-repeat	repeat	敷き詰める（初期値）
	repeat-x	水平方向に並べる
	repeat-y	垂直方向に並べる
	no-repeat	１つだけ表示する

　★ 使用例とブラウザでの表示 (a1-3)スタイルシートの書き方（基本）は、こちらです。


設定例： body { backGround-image: url(ballBlue.gif); backGround-repeat: repeat-y; backGround-color: khaki; Padding: 4px 10px; } .bgRep { backGround-image: url(ballRed.gif); backGround-repeat: repeat-x; backGround-color: snow; Padding: 4px; }

使　用　例		ブラウザの表示

<body> 画面全体の背景画像の並べ方は<br> 垂直方向(ballBlue.gif)です。 <div class=bgRep> ここの背景画像の並べ方は<br> 水平方向(ballRed.gif)です。 </div>ここから垂直方向に戻ります。 </body>		画面全体の背景画像の並べ方は垂直方向(ballBlue.gif)です。ここの背景画像の並べ方は水平方向(ballRed.gif)です。ここから垂直方向に戻ります。

※ 画像の並べ方の設定と「ブラウザの表示」欄の関係を分かりやすくするため、背景色も指定しています。

※ Padding: は余白の指定で、文字の表示位置を調整する働きをしています。

BG画像の表示位置

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

backGround-position: left top;

　このプロパティは、全てのタグ（要素）に適用できます。

　backGround-position は、背景画像の表示位置を指定するプロパティです。このプロパティを<body>タグ（要素）に設定すると、ページ全体の背景画像の表示位置を指定できます。

　body { backGround-image: url(back.gif); backGround-repeat: no-repeat;
backGround-position: right bottom; }
　.sName { backGround-image: url(back.gif); backGround-repeat: no-repeat;
backGround-position: right bottom; }

プロパティ名	説　　明
backGround-position	水平方向と垂直方向の位置を指定（初期値は 0% 0%）

水平方向と垂直方向の位置は、それぞれ以下の内容で指定します。

【キーワードで指定する場合】

水平方向	left…左	center…中央	right…右
垂直方向	top…上	center…中央	bottom…下

次のように、水平方向の位置と垂直方向の位置を、半角スペースで区切ります。
　　backGround-position: left top; … 左上に表示
　　backGround-position: center bottom; … 中央寄せで下に表示

次のように１つの値で指定することもできます。この場合、省略した方の位置は中央になります。
　　backGround-position: right; … 右の中央に表示
　　backGround-position: top; … 中央上に表示

【長さ・パーセントで指定する場合】

水平方向	左からの距離を、ピクセル数やパーセントなどで指定
垂直方向	上からの距離を、ピクセル数やパーセントなどで指定

次のように、左からの距離と上からの距離を、半角スペースで区切ります。
　　backGround-position: 100px 40px; … 左から100ピクセル、上から40ピクセルの位置に表示
　　backGround-position: 30% 60%; … 左から30％、上から60％の位置に表示

次のように水平方向だけで指定することもできます。この場合、垂直方向の位置は50％になります。
　　backGround-position: 100px; … 左から100ピクセル、上から50％の位置に表示
　　backGround-position: 40%; … 左から40％、上から50％の位置に表示

　★ 使用例とブラウザでの表示 (a1-4)スタイルシートの書き方（基本）は、こちらです。


設定例： body { backGround-image: url(sealL.gif); backGround-repeat: no-repeat; backGround-position: left bottom; backGround-color: wheat; Padding: 15px 4px; } .bgPosi { backGround-image: url(SL2w.gif); backGround-repeat: no-repeat; backGround-position: center; backGround-color: snow; }

使　用　例		ブラウザの表示

<body> 背景画像は、表全体に１個だけ表示すます。<br> 垂直方向は左側、水平方向は下側です。<br> <center><div style="text-align:left; height:95px;width:220px;" class=bgPosi> ここは、sheet名".bgPosi"です。<br> 垂直方向、水平方向とも中央部<br> に表示します。</div></center> 背景画像を使用するときは、薄い色のものを<br> 選んで下さい。また、１個だけ表示させるとき<br> は、大柄なものを選んで下さい。 </body>		背景画像は、表全体に１個だけ表示すます。垂直方向は左側、水平方向は下側です。ここは、sheet名".bgPosi"です。垂直方向、水平方向とも中央部に表示します。背景画像を使用するときは、薄い色のものを選んで下さい。また、１個だけ表示させるときは、大柄なものを選んで下さい。

＊サイズの大きいトレードマークを画面の中央などに表示しているページは、この方法を使っています。

※ Padding: は余白の指定で、文字の表示位置を調整する働きをしています。

※ <center>は、.bgPosi が機能している箇所を中央寄せにする働きをしています。

※ 画像の表示位置の設定と「ブラウザの表示」欄の関係を分かりやすくするため、背景色も指定しています。

BG画像のｽｸﾛｰﾙ設定

背景画像をスクロールさせない(CSS)

backGround-attachment: fixed;

　このプロパティは、全てのタグ（要素）に適用できます。

　backGround-attachment は、背景画像の固定表示（ウィンドウに対する固定表示）を指定するプロパティです。このプロパティを<body>タグ（要素）に設定すると、ページ全体の背景画像をスクロールしないように設定できます。

　body { backGround-image: url(back.gif); backGround-attachment: fixed; }
　.sName { backGround-image: url(back.gif); backGround-attachment: fixed; }

プロパティ名	値	説　　明
backGround-attachment	scroll	背景画像を固定しない…スクロールさせる（初期値）
backGround-attachment	fixed	背景画像を固定する…スクロールさせない

この属性は、対応していないブラウザもあるようです。

　★ 使用例とブラウザでの表示 (a1-5)スタイルシートの書き方（基本）は、こちらです。


設定例： body { backGround-image: url(sealL.gif); backGround-attachment: fixed; } .bgAtt { backGround-image: url(sealS.gif); backGround-attachment: scroll; backGround-color: #ffe8d8; }

使　用　例		ブラウザの表示

<body> 背景画像の表示方法は、fixed(固定する) です。スクロールバーを動かすと文字だけが動きます。 <div class=bgAtt> <iframe src="exam2.htm" align=center 　 height=120 width=226>example</iframe> </div> 背景画像は、薄い色のものを使用して<br> 下さい。また、大柄な背景画像を使用<br> すると落ち着いた画面になります。 </body>		example1

※ スクロールバーを表示させるため、本文も（「背景画像の表示方法は、...動きます。」、「背景画像は、...画面になります。」）も<iframe>を使用しています。

関連するページ

HTML タグページ

：背景画像をリピート表示させない

背景の一括指定

背景をまとめて指定する(CSS)

backGround: ***;

　このプロパティは、全てのタグ（要素）に適用できます。

　backGround は、背景色や背景画像（並べ方、位置、スクロール）をまとめて指定するプロパティです。このプロパティを<body>タグ（要素）に設定すると、ページ全体の背景色や背景画像を指定できます。

　body { backGround: #ffffff url(back.gif) repeat-x left center fixed; }
　.sName { backGround: #ffffff url(back.gif) repeat-y right top fixed; }

プロパティ名	値　および　説　明
backGround:	#ffffff 背景色	url(back.gif) 背景画像	repeat-x 並べ方	left top 表示位置	fixed 固定表示	;
初期値	transparent	none	repeat	center	scroll

＊それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。（省略した場合は初期値になります）

　★ 使用例とブラウザでの表示 (a1-6)スタイルシートの書き方（基本）は、こちらです。


設定例： body { backGround: mistyrose url(sealS.gif) repeat-X center fixed; } .bgAll { backGround: khaki url(sealS.gif) repeat-X left center fixed; }

使　用　例		ブラウザの表示

<body> 背景色…mistyrose∥画像…sealS.gif<br> 並べ方…水平方向∥表示位置…中央部<br> 固定表示…固定する <iframe src="exam4.htm" align=center 　 height=120 width=225>example4</iframe> 背景画像は、薄い色のものを使用して下さい。また、大柄な背景画像を使用すると落ち着いた画面になります。 </body>		example1

※ 画像の表示位置について…body { center } と .bgAll { left center } の違いは、画面左側の「画像の書き始め」の位置になります。
"center" を一個だけ指定すると水平方向・垂直方向とも画面中央なので、「画像の書き始め」の位置は、途中からになります。例外は、画面の表示幅が画像の横幅の整数倍になったときだけです。
一方、"left center" と指定すると水平方向が「左側」、垂直方向が「中央」になるので、「画像の書き始め」の位置は、左端からになります。なお、"center left" と指定した場合も同じ結果になります。

※ スクロールバーを表示させるため、本文も（「背景色…mistyrose...固定する」、「背景画像は、...画面になります。」）も<iframe>を使用しています。

関連するページ

CSS スタイルシート

：マーカーを背景画像で表示する（リスト）

HTML タグページ

：ページの背景色とテキスト色を指定する
HTML タグページ

：ページの背景に画像を使う