スタイルシート(CSS) background-attachment

background-attachmentは、背景画像が他のコンテンツと共にスクロールするか、あるいは固定するかを指定をするプロパティです。

ブラウザーのウィンドウ内が基準となるためスクロールバーが出るほどの内容があるページで指定しないと意味がありません。

background-attachment: 値;
値には次のようなキーワードが入ります。

fixed: 背景画像の固定でスクロールしても画像はその位置から動きません。
scroll: これが初期値で背景画像は他のコンテンツと共にスクロールするために、スクロールすると画像は見えなくなります。

※補足するとブラウザーのウィンドウ(ブラウザーで見えている部分)を基準にして、そのブラウザーで見えている部分に画像を固定(fixed)するか、ブラウザーで見えている部分で画像がスクロール(scroll)するかが決まっています。

実際に適用したらどうなるかは、下記のページで確認して下さい。
固定した場合 background-attachment:fiexd;
スクロールした場合(初期値) background-attachment:scroll;

スタイルシート(CSS) background-position

今回はbackground-positionプロパティの解説です。
background-positionプロパティは、指定した背景画像の表示位置を指定するのに使用します。

background-position: 値;

値には「表示位置」を左上角を起点にした横位置と縦位置を%か単位付きの数値、あるいはキーワードで指定します。

pxなどの単位付きの数値で指定する場合は、画面の解像度に依存するので必ず全て同じように表示されるわけでないことを考慮しましょう。ちなみにマイナスでの指定も出来ます。
上記のことからbackground-positionの値は、%で指定した方が間違いないでしょう。
キーワードは以下のような値を指定します。
キーワード: left right center top bottom

次のように間に半角スペースを入れ横位置と縦位置の順に指定します。
値に一つしか指定しなかった場合は、横位置だけ指定したことになり縦位置は「50%」を指定したことになります。
background-position: 横位置 縦位置;

また、キーワードで指定したときは「left」「top」は「0%」、「center」は「50%」、「right」「bottom」は「100%」を指定したのと同じになります。
値を一つしか指定しなかったときは、片方が「center」を指定したのと同じになります。


それでは300×300のボックスに下のような50×50の画像を背景画像に指定し、background-repeatでno-repeatを指定した上で、background-positionを指定します。。
背景画像



「background-position:50% 50%;」を指定。



「background-position:100% 100%;」を指定



「background-position:50% 100%;」を指定



「background-position:50% 100%;」を指定


上のようなボックスの中で指定すると解りませんが、background-positionを「body」に指定するとブラウザを大きくしたり小さくしたりすることで、表示位置が変ることを覚えておきましょう。

スタイルシート(CSS) background-repeat

前回のbackground-imageでは、背景画像の指定をやりました。
今回はcolorimageに続くbackgroundプロパティの解説です。
今回のbackground-repeatプロパティは、背景画像を指定しているときに、表示の仕方を指定するのに使用します。

background-repeat: 値;

値には次のような「表示の仕方」を指定します。
repeat: 繰返し表示する。初期値
repeat-x: 横方向だけ繰返し表示
repeat-y: 縦方向に繰返し表
no-repeat: 繰り返さずに1度だけ表示

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


背景画像に「background-repeat:repeat;」を指定。または指定しなくてもこのように表示されます。



背景画像に「background-repeat:repeat-x;」を指定



背景画像に「background-repeat:repeat-y;」を指定



背景画像に「background-repeat:no-repeat;」を指定


background-repeatプロパティは、背景にbackground-imageで指定した画像にのみ適用されるので、background-repeatとbackground-imageは対で使用することになります。
まとめて指定することも出来ますが、それは次回以降で解説します。

スタイルシート(CSS) background-image

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

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

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

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


背景に「background-image:url(http://img-cdn.jg.jugem.jp/272/1474973/20091013_1058327.gif);」と指定すると全体に表示されます


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

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

スタイルシート(CSS) background-color

背景色を指定するには「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要素に適用
・「#RRGGBB」のようにRGBを16進数で指定する。
#記号に続き、
R(赤)R(赤)G(緑)G(緑)B(青)B(青)
のようにRGBの各値を2桁ずつ16進数で指定します。


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

Recent Comments

Recent Trackbacks