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

CSSで背景画像の表示位置を指定する方法｜background-positionの使い方

背景位置とは、背景画像を表示し始める位置のことです。この設定には、background-position プロパティを使用します。

background-position プロパティの基本

background-position は、要素内のどの位置から背景画像を表示するかを指定できるCSSプロパティです。水平方向と垂直方向の位置を、以下のような方法で柔軟に指定できます。

  • キーワード指定： left（左）、center（中央）、right（右）、top（上）、bottom（下）などの組み合わせ
  • パーセント指定： 「50% 50%」のように、要素と画像の対応する位置を基準に配置
  • 数値指定： px や em などの単位で、左上からの距離を指定

また、background-repeat: no-repeat; と組み合わせることで、背景画像が繰り返されず、指定した位置に1枚だけ表示されるようになります。

例1：キーワードで位置を指定する

まずは、キーワードを使って背景画像を「左中央」に配置する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: blue;
   background-position: left center;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSで背景画像の表示位置を指定する方法｜background-positionの使い方

この例では background-position: left center; を指定しているため、背景画像は画面の左側中央に表示されます。さらに background-attachment: fixed; を指定しているので、ページをスクロールしても背景画像は固定されたままになります。

例2：パーセンテージで位置を指定する

次に、パーセンテージを使って背景画像を画面の中央に配置する例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: blue;
   background-position: 50% 50%;
}
</style>
</head>
<body>
<h1>Details</h1>
<p>Examination Center near ABC College.</p>
<p>Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSで背景画像の表示位置を指定する方法｜background-positionの使い方

background-position: 50% 50%; と指定すると、背景画像は要素の中央（水平方向50%・垂直方向50%の位置）に配置されます。パーセント指定では、要素の同じ割合の位置と画像の同じ割合の位置が揃うように配置されるのがポイントです。

まとめ

背景画像の位置調整には background-position プロパティを使用します。キーワード・パーセンテージ・数値のいずれでも指定でき、background-repeat や background-attachment と組み合わせることで、より自由度の高い背景デザインを実現できます。用途に応じて指定方法を使い分けましょう。

  1. CSSを使ったクロスブラウザ対応の不透明度（opacity）設定方法

    Webページで要素や画像を半透明にしたい場合、opacity プロパティが現代の標準的な解決策です。このプロパティは、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。 しかし、古いブラウザにも対応させるには、以下のレガシーなプロパティを組み合わせる必要があります。 -moz-opacity：Firefox 0.9より前のバージョン向けの不透明度プロパティ -khtml-opacity：Safari バージョン1以降向けの不透明度プロパティ filter: alpha(opacit

  2. CSSで角度を指定して線形グラデーションの方向を自在に設定する方法

    CSSのlinear-gradient()関数では、キーワード（to rightなど）だけでなく角度を指定することで、グラデーションの方向をより細かく制御できます。基本構文background-image: linear-gradient(角度, カラー1, カラー2);角度はdeg（度数法）で指定します。主な角度と方向の対応は以下の通りです。0deg：下から上へ（to topと同じ）90deg：左から右へ（to rightと同じ）180deg：上から下へ（to bottomと同じ・初期値）-90deg：右から左へ（to leftと同じ）サンプルコード以下は、CSSで角度を使って線形グラデーシ