JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのDOMで背景画像の開始位置を設定する方法

JavaScriptで背景画像の開始位置を設定するには？

JavaScriptで背景画像の開始位置（表示位置）を設定するには、backgroundPositionプロパティを使用します。このプロパティを使うことで、ページや要素に対して背景画像をどの位置に配置するかを自由にコントロールできます。

backgroundPositionプロパティとは

backgroundPositionは、CSSのbackground-positionに対応するJavaScriptのスタイルプロパティです。「top right」「center center」のようなキーワードのほか、「50% 50%」「10px 20px」といったパーセントやピクセル単位の値も指定できます。

サンプルコード

以下のコードを実行し、ボタンをクリックすると背景画像が設定され、その位置が右上（top right）に配置されます。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-repeat: no-repeat;
}
</style>
</head>
<body>
<button onclick="display()">クリックして背景画像を設定</button>
<script>
function display() {
  document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')";
  document.body.style.backgroundPosition = "top right";
}
</script>
</body>
</html>

コードの解説

まずCSSでbackground-repeat: no-repeat;を指定し、背景画像が繰り返し表示されないようにしています。ボタンがクリックされるとdisplay()関数が実行され、document.body.style.backgroundImageで背景画像を設定した後、document.body.style.backgroundPositionによって位置を「top right」（右上）に指定しています。

指定できる主な値

  • キーワード： left、right、top、bottom、center を組み合わせて指定
  • パーセント： 「50% 0%」のように要素の大きさに対する割合で指定
  • 長さ（pxなど）： 「100px 50px」のように左上からの距離で指定
  1. 【CSS入門】ウェブページに背景画像を設定する方法

    ウェブページに背景画像を設定するには、CSSを使用します。<style>タグ内でbackground-imageプロパティを指定することで、JPG・PNG・SVG・GIFなどの画像ファイルをページの背景として表示できます。なお、HTML5では<body>要素のbackground属性がサポートされていないため、背景画像の設定にはCSSを使うのが標準的かつ推奨される方法です。記述例以下のコードを参考にすると、HTMLページの背景画像を簡単に設定できます。実際にエディタに貼り付けて動作を確認してみてください。<!DOCTYPE html> <html>

  2. CSSのbackground-positionで背景画像の位置を設定する方法

    background-positionプロパティとはCSSで背景画像の表示位置を調整するには、background-positionプロパティを使用します。このプロパティを活用することで、要素内における背景画像の水平方向・垂直方向の位置を自由にコントロールできます。位置の指定には、ピクセル（px）やパーセンテージ（%）、emなどの単位のほか、「left」「center」「right」「top」「bottom」などのキーワードも利用可能です。値を1つだけ記述した場合は水平方向の位置として解釈され、2つ指定した場合は「水平方向　垂直方向」の順で適用されます。コード例次の例では、背景画像を左端から8