HTML & CSS

レシピ

画像

背景画像の表示位置を指定する

背景画像の位置指定を簡単に指定する方法から、数値で詳細に指定する方法まで解説します。

この記事のポイント

  • 背景画像を意図した位置に表示する

目次

背景画像を自在に配置する

特定のHTML要素の背景に画像を配置する際は、background-positionプロパティで表示位置を指定します。

調整前のコード例

<style>
section {
	background-image: url(./images/star.svg);
	background-position: right 10% bottom 10%;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
</style>
<section>
	<h2>背景画像の位置を指定する</h2>
	<p>背景に画像を配置する場合、background-positionプロパティを使います。</p>
</section>
表示例
表示例

背景画像の位置の指定方法について、いくつかのパターンを交えながら解説していきます。

左右、上下、中央のみ指定する

あらかじめ用意された「left」や「center」などの値を使って、x軸とy軸の位置をそれぞれ指定する最もシンプルで手軽な方法です。
指定できる値には次の6種類があります。

向き
X軸left、center、right
Y軸top、center、bottom

値のイメージはこのようになります。
center」は共通で使用できる値です。

位置のイメージ
位置のイメージ

続いて、具体的な指定例を確認していきましょう。

値を1つだけ指定する

値は1つ指定した場合はX軸、Y軸のいずれか(指定されなかった方は 「center」)となります。

コード例

/* background-positioプロパティに「left」を指定 */
section {
	background-image: url(./images/star.svg);
	background-position: left;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

コード例

/* background-positioプロパティに「bottom」を指定 */
section {
	background-image: url(./images/star.svg);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

コード例

/* background-positioプロパティに「bottom」を指定 */
section {
	background-image: url(./images/star.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

値を2つ指定する

値を2つ指定していきます。
X軸、Y軸のどちらから指定しても大丈夫です。

コード例

/* background-positioプロパティに「right bottom」を指定 */
section {
	background-image: url(./images/star.svg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

コード例

/* background-positioプロパティに「left top」を指定 */
section {
	background-image: url(./images/star.svg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

数値を使って位置を詳細に指定する

背景画像の位置は上記の「left」などの値に加えて、具体的に数値で指定することもできます。

コード例

/* 右から35%、下から5%の位置を指定 */
section {
	background-image: url(./images/star.svg);
	background-position: right 35% bottom 5%;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

X軸かY軸のどちらか1つだけ指定する形でも問題ありません。

コード例

/* X軸は「right」、Y軸のみ数値で下から20pxを指定 */
section {
	background-image: url(./images/star.svg);
	background-position: right bottom 20px;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

数値のみで指定することも可能です。
その場合は1つ目はX軸の指定、2つ目はY軸の指定となります。
また、それぞれで「px」や「%」のように異なる単位を指定できます。

コード例

/* X軸は「right」、Y軸のみ数値で下から20pxを指定 */
section {
	background-image: url(./images/star.svg);
	background-position: 50% 150px;
	background-repeat: no-repeat;
	background-size: 40% auto;
}
表示例
表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。