背景画像の位置を決める!background-positionプロパティの設定について紹介

CSSには、背景画像に関する設定があります。その中でも、background-positionプロパティは、背景画像の位置を決めるために使います。

しかし、background-positionプロパティの

設定方法が分からない

というCSS初心者の方がいるでしょう。

そこで今回は、background-positionプロパティの

・基本的な使い方
・さまざまな設定の仕方

について説明していきます。

CSSで背景画像の勉強をしている方に役立つ情報なので、ぜひ目を通してください。

background-positionプロパティとは

background-positionプロパティの読み方

background-positionは、「バックグラウンド-ポジション」と読みます。

背景の位置に関わる設定に使われます。

background-positionプロパティの説明

background-positionプロパティとは

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

ときに使います。

background-positionプロパティの設定をするには、背景画像を使うbackground-positionプロパティも必要とします。

サイトでは、文章に加えて画像も使っていることが多いため、背景画像に関わるbackground-positionプロパティを覚える重要度は高いです。

覚えやすいように、background-positionプロパティを使ったコードをこの記事内で詳しくご紹介していきます。

background-positionプロパティで利用できる値

background-positionプロパティでは以下の値を使うことができます。

説明
length 背景画像が表示される左上からpxなどの単位を付けて横と縦の距離を指定します。
percentage percentageは、背景画像の横方向と縦方向に距離を%で指定する値です。
position positionは、数値ではなくtop・bottom・left・rightなどで指定します。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

background-positionプロパティの基本的な使い方

background-positionプロパティの使い方

background-positionプロパティの設定をしたコードを実際に見ていきましょう。

See the Pen
background-positionプロパティの使い方
by 吉井大輝 (@DaiW)
on CodePen.

まずbackground-positionプロパティを使うために、背景画像を設定するbackground-imageプロパティが必要です。

背景画像が繰り返して表示される場合、background-repeatプロパティでno-repeatという繰り返しさせない値を指定します。

さらに、画像の大きさを調整するときには、background-sizeプロパティで横幅と高さを設定してあげます。

「背景画像」・「繰り返さない」・「大きさ」を設定したコードが以下になります。

上記のコードによって、背景画像の横幅と高さを200pxにし、繰り返し表示させない状態にしています。

background-positionプロパティの値について

背景画像のサイズなどの設定をしてから、background-positionプロパティを使っていきます。

「background-positionプロパティの使い方」でご紹介したbackground-positionプロパティの値は10pxとなっています。

上記のように値を指定すると#mainの左上を基準に横方向と縦方向の距離を10px移動させられます。

方向ごとに値を変えることで、背景画像をさまざまな位置に移動できます。

ちなみに基準となる位置は、背景画像を設定している要素によって変わりますよ。

background-positionプロパティで背景画像をさまざまな位置に移動させてみよう

background-positionプロパティを使い、背景画像をさまざまな位置に移動させた設定をご紹介していきます。

背景画像を左下にくっつける

See the Pen
背景画像を左下にくっつける
by 吉井大輝 (@DaiW)
on CodePen.

左下にくっつけるとき、値をpositionのみで指定すると以下のようになります。

豆知識
値がpercentageでも、background-position:0 100%;と指定すれば、左下にくっつけられます。

背景画像を要素の中央に移動させる

See the Pen
背景画像を要素の中央に移動させる
by 吉井大輝 (@DaiW)
on CodePen.

#box要素の中央に移動させたい場合以下のようにcenterを指定します。

豆知識
値をpercentageにして中央に移動させる場合は、background-position:50%;にします。

まとめ

いかがでしたでしょうか?

今回は、background-positionプロパティの基本的な使い方やさまざまな設定方法についてご紹介しました。

background-positionプロパティの説明をしたコードを参考にすることで、値の指定によってどのように動くのか分かるようになるでしょう。

background-positionプロパティの設定をぜひ試してみてください。

参考文献:MDN web docs|background-positionプロパティ : CSS のプロパティで、それぞれの背景画像の初期位置を設定します。