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

CSSのbackground-positionプロパティで背景画像の位置を設定する方法

background-positionプロパティとは

CSSのbackground-positionプロパティは、背景画像の表示開始位置（初期位置）を、原点を基準として設定するために使用します。キーワード（top、bottom、left、right、center）、パーセンテージ、またはpxなどの長さの値を組み合わせて指定でき、複数の背景画像がある場合には、カンマで区切って各画像に個別の位置を割り当てることも可能です。

構文

background-positionプロパティの基本的な書式は以下のとおりです。

セレクタ {
    background-position: /* 値 */
}

それでは、具体的な使用例を見ていきましょう。

使用例1：複数の背景画像に個別の位置を指定する

次の例では、div要素に3つの背景画像を読み込み、「15% 20%」「top」「right」という3つの異なる位置をカンマ区切りで指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 30px;
    padding: 100px;
    background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");
    background-repeat: no-repeat;
    background-position: 15% 20%, top, right;
    border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。1つ目の画像は左から15%・上から20%の位置に、2つ目の画像は上部中央に、3つ目の画像は右側に配置されています。

CSSのbackground-positionプロパティで背景画像の位置を設定する方法

使用例2：座標値とキーワードを組み合わせる

続いて、p要素に2つの背景画像を設定し、「0 0」（左上）と「bottom right」（右下）という位置を指定した例です。背景色も合わせて指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 20px;
    padding: 80px;
    background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");
    background-repeat: no-repeat;
    background-position: 0 0, bottom right;
    background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>これはデモ用の段落です。これはデモ用の段落です。これはデモ用の段落です。これはデモ用の段落です。これはデモ用の段落です。これはデモ用の段落です。これはデモ用の段落です。これはデモ用の段落です。</p>
</body>
</html>

出力結果

実行すると、1つ目の画像は要素の左上に、2つ目の画像は右下に配置されていることが確認できます。

CSSのbackground-positionプロパティで背景画像の位置を設定する方法

まとめ

background-positionプロパティを使えば、背景画像の配置位置を柔軟にコントロールできます。「top left」などのキーワード指定、「50% 50%」のようなパーセント指定、「10px 20px」のようなピクセル指定など、目的に応じて使い分けることで、より洗練されたデザインを実現できます。

  1. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負

  2. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp