background-position

背景画像の位置を指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ background-position : 値; }
要素[.class名][#id名]{ background-position : 値(水平位置) 値(垂直位置); }

▲PageTop

指定できる値

値 初期値 意味
数値+単位(水平位置)
数値+単位(垂直位置) 		水平位置は左辺からの距離で指定し、垂直位置は上辺からの距離を指定します。
単位例：px,em,ex,%
left 左端に配置します。
right 右端に配置します。
center 中央に配置します。
top 上端に配置します。
bottom 下端に配置します。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      <!--
        #sample1 {
          background-position : right;
        }
        #sample2 {
          background-position : center bottom;
        }
        #sample3 {
          background-position : 25% 50%;
        }
        #sample div {
          background-image : url(../../../../images/development/htmlcss/background-sample.gif);
          background-repeat : no-repeat;
          border : solid 1px #cccccc;
          margin-right : 10px;
          height : 100px;
          width : 250px;
          float : left;
        }
        -->
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">【right】</div>
      <div id="sample2">【center bottom】</div>
      <div id="sample3">【25% 50%】</div>
    </div>
  </body>
</html>

表示結果

【right】
【center bottom】
【25% 50%】

▲PageTop

関連項目

CSS

background-image

▲PageTop

▲