前回のbackground-colorでは、背景色の指定をやりました。
今度は背景に画像を表示してみましょう。

background-image: url(画像の保存先URL);

括弧内の「画像の保存先URL」は画像を保存した場所によって変ります。
ただスタイルシートを外部(別ホルダー)に保存した場合はそのスタイルシートの位置が基準になるので注意が必要です。
※解らない方はHTML 画像の配置 img要素などを参考にして下さい。

それでは300×300のボックスに下のような100×100の画像を背景画像として表示してみましょう。




背景に「background-image:url(images/camo01.gif);」と指定すると上のように全体に指定画像が表示されます。

background-imageの指定は、前回の「background-color」で示したようなHTMLのタグに使用することが出来ます。
ただし画像の色と文字の色に注意しないと、文字が読みづらくなるので注意が必要です。

背景色を指定するには「background-color」プロパティを使用します。

background-color: 色指定;

色指定の値には「スタイルシート（CSS） 色の指定 color」で解説した値が使用できます。

「background-color」プロパティは、いろんなHTML要素の背景色の指定に使用できます。

例えば、div要素、h1などの見出し要素、p要素、table要素、body要素などの背景色を指定することが出来ます。

■h1要素に適用した場合

スタイルシート（CSS） background-color

■p要素に適用

・「#RRGGBB」のようにRGBを16進数で指定する。
#記号に続き、
R（赤）R（赤）G（緑）G（緑）B（青）B（青）
のようにRGBの各値を2桁ずつ16進数で指定します。

■table、td、tr要素に適用

td要素に背景色適用したセル	td要素の背景色指定なし	td要素の背景色指定なし
tr要素に背景色適用したセル	tr要素に背景色適用したセル	tr要素に背景色適用したセル

■div要素に適用


このように「background-color」で指定した色に背景色を変えることが出来ます。
ちなみに背景色を指定しない場合は、ブラウザのデフォルト背景色で白になると考えて良いでしょう。
また文字(フォント)の色はcolorプロパティで指定するので間違えないようにして下さい。

文字（アルファベット）の表示に関するプロパティ。
指定した文字列全体を大文字や小文字、あるいは単語単位で先頭の文字だけを大文字で表示します。

text-transform: 値;

値には次のようなキーワードを指定します。
uppercase ＝　全ての文字列を大文字で表示。
lowercase ＝　全ての文字列を小文字で表示。
capitalize ＝　各単語の頭文字だけを大文字で表示。

■オリジナル例文：
「Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday」

■例1：
例文に「text-transform: uppercase;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


■例2：
例文に「text-transform: lowercase;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


■例3：
例文に「text-transform: capitalize;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


例のように指定範囲のアルファベットは変化しますが、日本語に指定しても何ら変わりはありません。

「text-transform: uppercase;」は、タイトルや題名に使うと便利なのでたまに使用します。

text-indentプロパティは、先頭行のテキストをインデントします。
ただし指定するテキストはブロックレベル要素に含まれている必要があります。

text-indent:値;

値にはpx、em等単位つきの数字で指定します。値にはマイナスも指定できます。






text-indentは、インデントするだけではなく先頭に画像を表示するときなどに使うと便利なプロパティです。

HTMLで使われる要素は、大きくブロックレベル要素とインライン要素に分けられる。

ブロックレベル要素は、それ自体が「一つの塊（ブロック）」として扱われます。ブロックレベル要素の内容には、インライン要素はもちろんブロックレベル要素も含むことが出来ます。

しかし、段落（p）要素はインライン要素しか含むことが出来ないので注意が必要です。

また、ブロックレベル要素をインライン要素内に含むことは出来ません（置いてはいけない）。

ブロックレベル要素には、、見出し（h*）要素、段落（p）要素、リスト（ul,ol,dlなど）要素、hr要素、テーブル（table）要素、div要素などがあります。


インライン要素は、ブロックレベル要素の中で何かしらの機能を持ったもの、あるいは文字列などのことで、ブロックレベル要素の内容に含まれるべきものです。

インライン要素は、文字やその他のインライン要素を含むことが出来ますが、ブロックレベル要素を含むことは出来ません。ですからブロックレベル要素は、インライン要素の外に記序する必要があります。

インライン要素には、アンカー（a）要素、文字装飾（strong,em等）要素、img要素、br要素、span要素などがあります。