backgroundまとめ

background、CSS講座

backgroundまとめ指定

{background:値;}

☆説明

背景色の指定をまとめてすることが出来ます。backgroundはまとめ指定を覚えておくと便利です。

backgroundの指定「color,image,repeat,position」をまとめてすることができます。指定する際は半角スペースを空けてください。
記述順は問いません。省略も可能です。

urlは絶対(http://yourdomein.com/images〜)パスで記述する事もできます。
[css]
.matome {
background:url(image/hp-soft-navi.jpg) no-repeat center center;
[/css]

背景画像を中央に配置してみました

background-color

{background-color:値;}

☆説明

背景色の指定をする。

[html]

背景色を緑にしました

[/html]

背景にグリーンを設定しました。

background-image

{background-image:値;}

☆説明

背景に画像を設定します。

値にはurl(ここに画像へのパス)と記述する。

バックグラウンド画像を「repeat」で繰り返し表示しています。

[html]

背景に画像を設定しました。

[/html]

背景に画像は何でも指定できます。

background-position

{background-position:値;}

☆説明

背景画像の配置位置を指定します。横の指定の後半角スペースを空けて縦の指定をします。下記のコードを参照ください。

背景画像の位置を調整できます。
ピクセルなどの単位を用いて指定することもできます。基準となる場所は左上です。(記述例/background-position:30px 40px)
[css]
/*top bottm left right centerが使えます。*/
background-position{url() top bottm left right center;}
[/css]

background-repeat

{background-repeat:値;}

☆説明

background-repeat:repeat; 全体的にリピートして表示
background-repeat:repeat-x; 横にリピートして表示
background-repeat:repeat-y; 縦にリピートして表示
background-repeat:none; リピートなし

背景色や背景画像を繰り返して表示する。

背景を画像にする場合のポイント:

①同じパターンを使うなら、小さい画像を1つ作って、repeatで繰り返して表示するのがいいでしょう。大きな画像を設定するとサイトの表示速度が遅くなる場合があります。

②背景にグラデーションを使用したい場合は縦長の画像を作ってrepeat-xで横に繰り返して配置しましょう。サイトの表示に負担をかけない軽い画像を使うのがポイントです。

background-attachment

背景画像を固定したい場合はbackground-attachmentを使いましょう。
bodyに設定すると画面をスクロールしても、背景画像が固定したまま表示されます。