So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

【背景】background [リファレンス]

説 明

背景の設定をします。

使い方

background: ;

:背景の色
:背景の画像
:背景画像の繰り返し
:背景画像のスクロール
:背景画像の位置

注1)区切りは半角スペースです。
注2)A〜Eすべてが設定されている必要はありません。設定しない場合はデフォルト値(初期値)となります。

解 説

:背景の色
#RRGGBBの形式でカラーを指定します。

ソースコード:
aaa {
background:#000000;
}

表示例:
背景を黒にします


:背景の画像
背景画像を指定します。
背景画像を貼り付ける場合でも、背景色を指定しましょう。万が一背景画像が表示されなかったり、画像の読み込みに時間がかかったりした時、背景の色が表示されます。

ソースコード:
bbb {
background:#70A148 url("/_images/blog/_***/****/ファイル名");
}

表示例:
背景画像を貼り付けます


:背景画像の繰り返し
背景画像の繰り返し設定を指定します。
指定可能なキーワードは以下です。
           
初期値:repeat縦・横方向すべてに画像を繰り返し表示します
repeat-x横方向にのみ画像を繰り返し表示します
repeat-y縦方向にのみ画像を繰り返し表示します
no-repeat繰り返さず、1回のみ表示します


ソースコード:repeat-x(横方向のみ繰り返し)
ccc {
background:#FFEFD6 url("/_images/blog/_***/****/ファイル名") repeat-x;
}

表示例:repeat-x
横方向にのみ背景画像を貼り付けます

表示例:repeat-y
縦方向にのみ背景画像を貼り付けます


:背景画像のスクロール
個人的に好みではないので、説明は省きます。

:背景画像の位置
「C:背景画像の繰り返し」においてrepeat以外を設定したときの背景画像の表示位置を指定します。
指定可能なキーワードは以下です。
初期値はブラウザの左上、すなわち[top/left]となります。
        
垂直方向
初期値:top上寄せ
center中央寄せ
bottom下寄せ
        
水平方向
初期値:left左寄せ
center中央寄せ
right右寄せ


ソースコード:bottom right(右下)
eee1 {
background:#FCCECE url("/_images/blog/_***/****/ファイル名") no-repeat bottom right;
}

表示例:
右下に背景画像を貼り付けます


ソースコード:repeat-x、垂直方向center
eee2 {
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") repeat-x center;
}

表示例:垂直方向center
横方向にのみ背景画像を貼り付けます(垂直方向中央)

以上。


nice!(1)  コメント(0) 
共通テーマ:ペット

nice! 1

コメント 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。