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

背景画像の位置を制御するには？CSSのbackground-positionプロパティの使い方

Webページの背景に表示した画像の位置を調整したい場合には、CSSの background-position プロパティを使用します。このプロパティを使うことで、背景画像を左右や上下の好きな位置に正確に配置できます。

background-positionの基本的な指定方法

background-position プロパティでは、ピクセル（px）やパーセンテージ（%）、あるいは「left」「center」「right」「top」「bottom」などのキーワードを使って位置を指定できます。

使用例

次のコードを実行して、background-position プロパティの動作を実際に確認してみましょう。この例では、背景画像を左端から30ピクセルの位置に配置しています。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position: 30px;
         }
      </style>
   </head>
   <body>
      <p>Tutorialspoint</p>
   </body>
</html>

補足：水平・垂直の両方向を指定する

background-position プロパティは、値をスペースで区切って2つ指定することも可能です。例えば「background-position: 30px 50px;」と記述すると、背景画像を左端から30ピクセル、上端から50ピクセルの位置に配置できます。キーワードとの組み合わせ（例：「left top」）にも対応しているため、柔軟なレイアウト調整が行えます。

  1. CSSのpositionプロパティを使って要素を自在に整列する方法

    CSSでは、positionプロパティとtop・right・bottom・leftなどのオフセットプロパティを組み合わせることで、要素を思い通りの位置に整列させることができます。 positionプロパティで使える主な値 static — 初期値。通常の文書フローに従って配置され、オフセットプロパティは無効になります。 relative — 要素の本来あるべき位置を基準に、相対的にずらして配置します。 absolute — positionが指定された直近の親要素を基準に、絶対的な位置へ配置します。 fixed — ブラウザのビューポート(表示領域)を基準に固定され、スクロールしても動きませ

  2. CSSのbackgroundショートハンド（一括指定）プロパティの使い方を解説

    CSSのbackgroundショートハンド（一括指定）プロパティは、要素の背景をまとめて定義するための便利なプロパティです。1つの宣言で複数の背景関連プロパティを同時に設定できるため、コードが簡潔になり、可読性も向上します。backgroundショートハンドに含まれる個別プロパティbackgroundショートハンドを使うことで、以下の8つの個別プロパティを一度に指定できます。background-color：背景色background-image：背景画像background-repeat：画像の繰り返し方法background-position：画像の表示位置background-clip：