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

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

background-positionプロパティとは

CSSで背景画像の表示位置を調整するには、background-positionプロパティを使用します。このプロパティを活用することで、要素内における背景画像の水平方向・垂直方向の位置を自由にコントロールできます。

位置の指定には、ピクセル（px）やパーセンテージ（%）、emなどの単位のほか、「left」「center」「right」「top」「bottom」などのキーワードも利用可能です。値を1つだけ記述した場合は水平方向の位置として解釈され、2つ指定した場合は「水平方向　垂直方向」の順で適用されます。

コード例

次の例では、背景画像を左端から80px（ピクセル）の位置に配置しています。

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

主な指定値の一覧

background-positionプロパティでよく使われる値は以下のとおりです。

  • left / center / right：水平方向の位置をキーワードで指定します。
  • top / center / bottom：垂直方向の位置をキーワードで指定します。
  • px や % などの数値：正確な座標で位置を指定できます。「80px」と書けば左から80pxの位置に背景画像が配置されます。

たとえば background-position: center top; と指定すれば、背景画像は水平方向の中央・垂直方向の上端に表示されます。キーワードと数値を組み合わせれば「右下に配置する」「中央より少し上にずらす」など、柔軟なレイアウト設計が可能になります。Webページのデザインに合わせて、ぜひ活用してみてください。

  1. CSSのlinear-gradient()関数で背景に線形グラデーションを設定する方法

    CSSでは、linear-gradient()関数を使うことで、背景画像として線形グラデーションを簡単に設定できます。この関数はbackgroundプロパティやbackground-imageプロパティの値として指定し、複数の色をカンマで区切って渡すことで、それらが滑らかにつながったグラデーションが生成されます。 linear-gradient()関数の基本構文 background: linear-gradient(色1, 色2, 色3, ...); 色は2つ以上指定でき、上から下へ順番に表示されます。グラデーションの方向（角度）を指定することも可能です。例えばlinear-gradient

  2. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m