style.backgroundPositionプロパティ

style.backgroundPositionは、要素のスタイル属性のbackground-positionプロパティの値を取得、もしくは、設定するプロパティ。

background-positionプロパティは、要素の背景画像の位置を指定することができる。

構文

取得

var $backgroundPosition = $elementReference.style.backgroundPosition;

戻り値

要素のスタイル属性のbackground-positionプロパティの値。

設定

$elementReference.style.backgroundPosition = "position";
position
背景画像を表示する位置。
下記の何れかの方法で指定する。初期設定値は、「0% 0%」。
  • left top:左上。
  • center top:中央上。
  • right top:右上。
  • left center:左中央。
  • center center:中央。
  • right center:右中央。
  • left bottom:左下。
  • center bottom:中央下。
  • right bottom:右下。
  • x% y%:「x」に左端からの距離、「y」に上からの距離を、割合で指定。
  • x y:「x」に左端からの距離、「y」に上からの距離を指定。
  • inherit:親要素の「background-position」プロパティを継承。

サンプル

サンプルボックス要素

変更後のスタイルのbackground-positionプロパティの値:

サンプルの動作について

  • 「設定(右上)」ボタンをクリックすると、「サンプルボックス要素」の背景画像を右上に表示し、「変更後のスタイルのbackground-positionプロパティの値:」の右横に「right top」と表示する。
  • 「設定(中央)」ボタンをクリックすると、「サンプルボックス要素」の背景画像を中央に表示し、「変更後のスタイルのbackground-positionプロパティの値:」の右横に「center center」と表示する。
  • 「設定(左下)」ボタンをクリックすると、「サンプルボックス要素」の背景画像を右上に表示し、「変更後のスタイルのbackground-positionプロパティの値:」の右横に「left bottom」と表示する。
  • 「設定(75% 75%)」ボタンをクリックすると、「サンプルボックス要素」の背景画像を、左から75%、上から75%の位置に表示し、「変更後のスタイルのbackground-positionプロパティの値:」の右横に「75% 75%」と表示する。
  • 「設定(20px 20px)」ボタンをクリックすると、「サンプルボックス要素」の背景画像を、左から20px、上から20pxの位置に表示し、「変更後のスタイルのbackground-positionプロパティの値:」の右横に「20px 20px」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setBackground( $position ) {
 var $elementReference = document.getElementById( "sample" );
 $elementReference.style.backgroundPosition = $position;
 var $backgroundPosition = $elementReference.style.backgroundPosition;
 document.getElementById( "sampleOutput" ).innerHTML = $backgroundPosition;
}
</script>

HTML

<div id="sample" style="background: yellow url('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg') no-repeat top right; margin: 10px 0; width: 300px; height: 200px;">サンプルボックス要素</div>
<button onclick="setBackground('right top');">設定(右上)</button>
<button onclick="setBackground('center center');">設定(中央)</button>
<button onclick="setBackground('left bottom');">設定(左下)</button>
<button onclick="setBackground('75% 75%');">設定(75% 75%)</button>
<button onclick="setBackground('20px 20px');">設定(20px 20px)</button>
<p>変更後のスタイルのbackground-positionプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, プロパティ, リファレンス, 背景 パーマリンク