2010年03月17日

css 背景画像の配置 background-positionプロパティ

スポンサード リンク

background-positionプロパティ
背景画像の初期表示位置を指定します。

 ↑
  ボックス上辺
←左辺

数値で配置 ( background-position: 水平位置 垂直位置 )



キーワードで配置



↑↑ボタンを押すとラベルに書かれた位置に画像が移動します。↑↑
        背景画像を指定した位置に繰り返さずに表示させたい場合は、
            background-repeatプロパティでno-repeatを指定します。

今のブログで満足ですか?
FC2レンタルサーバーLiteでホームページを作る!

  background-positionの値、数値で指定
数値 + 単位で指定します。サンプルでは px と % を使用。
 ・値が1つだけの場合は "ボックスの左辺からの位置" を指定したことになり、
   "上辺からの位置"の値は自動的に"50%"(中央)になります。
 ・値が2つの場合は水平位置と垂直位置を、半角スペースを入れて記述します。

 ・ピクセルなどで指定した場合は画像の左上が表示の基点になりますが
  ・パーセントのときは違います。50% 50% を指定すると背景画像はボックスの真ん中に
     表示されますが、これは画像の50% 50%の位置、つまり画像の中央が
ボックスからの位置 50% 50% の基点になっているからです。そうでなければ
100% 100% (ボックスの右下)なら画像はボックスからはみ出て表示されません!!

background-position: 50px; // 左から50px,上からは自動的に50% の位置
background-position: 60px 40px; //左から60px,上から40px の位置

キーワードで指定
  水平方向  left(左) center(中央) right(右)
 垂直方向  top(上) center(中央) bottom(下)
 
 ・一つの値を指定した場合省略した値は自動的に"center"になります。
 ・値が二つの場合は水平方向と垂直方向(順不同)を、半角スペースを入れて記述します。

background-position: top; //上辺 中央   50% 0%
background-position: left; //左辺 中央   0% 50%
background-position: center; // 中央     50% 50%
background-position: bottom left; //左下 0% 100%
background-position: top right; //右上   100% 0%
background-position: top left; //左上    0% 0%

背景画像
背景画像 background-imageプロパティ
背景画像background-repeatプロパティ
スタイルシート CSS
CSSだけでおこなう、画像の入れ替えとポップアップ
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 15:37 | 大阪 ☀ | 背景 背景画像 | このブログの読者になる | 更新情報をチェックする
×

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