Webページを作るにあたり、css要素を一つずつ調べて使うのもいいのですが、
Css要素をある程度知っておくととても便利です。
今回はよく使うcss要素をまとめて見ましたので紹介します。
（目次）
■ background-image
■ background-position
■ background-repeat
■ background-attachment
■ background-image
background-imageプロパティ : 背景画像を指定する際に使用します。
background-imageを使う事ができる要素。
・<body>
・＜table>
・<p>
・<div>
・<span>
※注意する事
・背景画像はURLで指定します。
『stylesheet』部分を外部ファイルにしている場合には、
HTMLファイルから見たパスではなく、
外部スタイルシートファイルからのパスで指定しなくてはならない。
・ 背景に画像を指定する際には、背景色と文字色も同時に指定する。
ユーザーの環境により背景画像が表示されない場合に、
背景色と文字色の関係により、文字が読みにくくなってしまうケースがあるからです。
書き方
■ background-position : 背景画像の表示開始位置を指定する。
background-positionプロパティは、
背景画像の表示開始位置を指定するプロパティです。
背景画像の表示開始位置を%値や数値で指定する場合には、
値を横方向・縦方向の順にスペースで区切って指定します。
◎基点は適用する要素が形成するボックスのパディング左上です。
位置を表す指定
・基点からleft・center・rightや、top・center・bottomと言った位置指定。
・基点から、0%・50%・100%と位置指定。
※上二つが指定しているのは、それぞれ同じです。
%値で指定
背景画像が表示される領域の左上からの距離を、
横方向と縦方向の順で、%で指定します。
例えば、background-position: 20% 40%; と指定した場合、
表示される領域の左端から20%、
上端から40%の位置が背景画像の表示開始位置となります。
数値で指定
背景画像が表示される領域の左上からの距離を、
横方向と縦方向の順で、数値にpxなどの単位をつけて指定します。
pxとは1ピクセルを1とする単位で、
数値にはマイナスの値も指定することができます。
※画像を繰り返し使う為のbackground-repeat:と同時に使われます。
■ background-repeat
background-repeat : 背景画像の繰り返しリピート表示のしかたを
指定するプロパティーです。
背景画像が壁紙のような場合、一つの小さな画像を繰り返し表示することで
画面一杯に高速表示させることができます。
repeat : 縦横に背景画像を繰り返して表示します。これが初期値です。
repeat-x : 横方向にのみ背景画像を繰り返して表示します。
repeat-y : 縦方向にのみ背景画像を繰り返して表示します。
no-repeat : 背景画像を一回だけ表示して繰り返しません。
■ background-attachment
background-attachment : 画面をスクロールする際、
背景画像をそのまま固定するか、
スクロールに伴って移動するか指定するプロパティーです。
fixed : 背景画像の位置が固定され、スクロールしても動かなくなります。
scroll : スクロールに伴って、背景画像も移動します。
このプロパティを指定しなければ、
背景画像も文章とともにスクロールで移動します。
固定したいときに『 fixed 』を使用します。
