HTML DOM StyleのbackgroundPositionプロパティとは？使い方と指定方法を解説
backgroundPositionプロパティは、要素の背景画像の初期位置を取得または設定するために使用されます。背景画像を要素の原点（左上）を基準としてどこに配置するかを制御できます。
構文（シンタックス）
backgroundPositionプロパティを設定する場合の基本的な構文は以下のとおりです。
object.style.backgroundPosition = value
指定できる値
backgroundPositionプロパティには、主に以下の値を指定できます。
| 値 | 説明 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
「top」「center」「bottom」（垂直方向）と「left」「center」「right」（水平方向）を組み合わせたキーワードで位置を指定します。値を1つだけ記述した場合、省略された側は自動的に「center」として扱われます。 |
| xpos ypos | 水平方向（x）と垂直方向（y）の位置を数値で指定します。基準点は要素の左上隅で、そこが「0,0」となります。単位は任意のCSS単位を使用できますが、一般的にはピクセル（px）が好まれます。 |
| x% y% | 水平方向（x）と垂直方向（y）の位置をパーセンテージで指定します。「0% 0%」が左上隅、「100% 100%」が右下隅に対応します。値を1つだけ指定した場合、もう一方は50%（中央）として扱われます。 |
| initial | このプロパティをデフォルトの初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
それでは、backgroundPositionプロパティの具体的な使用例を見てみましょう。次のコードでは、ボタンをクリックすると背景画像の位置が変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition="top right";
document.getElementById("Sample").innerHTML="背景画像の位置が変更されました";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>下のボタンをクリックして、背景画像の位置を変更してみましょう。</p>
<button onclick="changeBackPosition()">CHANGE POSITION</button>
<p id="Sample"></p>
</body>
</html>
この例では、body要素にあらかじめ「20% 60%」という位置で背景画像が設定されています。ボタンがクリックされるとJavaScriptの関数が実行され、backgroundPositionプロパティが「top right」に書き換えられます。
実行結果
上記のコードを実行すると、最初は次のように背景画像が表示されます。
その後、「CHANGE POSITION」ボタンをクリックすると、背景画像の位置が右上（top right）へ移動します。
このように、backgroundPositionプロパティを使えば、JavaScriptから動的に背景画像の位置を簡単に操作することができます。キーワード指定、数値指定、パーセンテージ指定など、目的に応じて適切な方法を選択しましょう。
-
HTML DOM Style positionプロパティとは？使い方と設定値を解説
HTML DOM Styleのpositionプロパティは、HTMLドキュメント内の要素の配置方法（ポジショニング）を取得および変更するために使用されるプロパティです。構文positionプロパティの基本的な構文は以下のとおりです。1. position値の取得object.position2. position値の変更object.position = valuevalueには以下の値を指定できます。番号値と説明1initialこのプロパティの値をデフォルト値に設定します。2inherit親要素からこのプロパティの値を継承します。3static要素はドキュメントフローに従い、記述された順序ど
-
HTML DOMのStyle leftプロパティとは？使い方とサンプルコードを解説
HTML DOM Style leftプロパティとはHTML DOMのleftプロパティは、位置指定された要素の「左からの位置」を設定または取得するために使用されます。なお、このプロパティで要素の位置を制御するには、対象要素のCSS positionプロパティが relative、absolute、fixed のいずれかに設定されている必要があります。構文leftプロパティを設定する際の構文は以下の通りです。object.style.left = auto|length|%|initial|inherit;指定できる値の一覧値説明autoデフォルト値です。左位置はブラウザが自動的に決定します。