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プロパティで横幅と高さを設定してあげます。
「背景画像」・「繰り返さない」・「大きさ」を設定したコードが以下になります。
|
1 2 3 4 |
background-image:url( https://drive.google.com/uc?export=view&id=10KmD_jO2zSYL4SbOuprzefg_iJqs1IFj); background-repeat:no-repeat; background-size:200px; |
上記のコードによって、背景画像の横幅と高さを200pxにし、繰り返し表示させない状態にしています。
background-positionプロパティの値について
背景画像のサイズなどの設定をしてから、background-positionプロパティを使っていきます。
「background-positionプロパティの使い方」でご紹介したbackground-positionプロパティの値は10pxとなっています。
|
1 2 3 |
#main{ background-position:10px; } |
上記のように値を指定すると#mainの左上を基準に横方向と縦方向の距離を10px移動させられます。
方向ごとに値を変えることで、背景画像をさまざまな位置に移動できます。
ちなみに基準となる位置は、背景画像を設定している要素によって変わりますよ。
background-positionプロパティで背景画像をさまざまな位置に移動させてみよう
background-positionプロパティを使い、背景画像をさまざまな位置に移動させた設定をご紹介していきます。
背景画像を左下にくっつける
See the Pen
背景画像を左下にくっつける by 吉井大輝 (@DaiW)
on CodePen.
左下にくっつけるとき、値をpositionのみで指定すると以下のようになります。
|
1 |
background-position:left bottom; |
値がpercentageでも、background-position:0 100%;と指定すれば、左下にくっつけられます。
背景画像を要素の中央に移動させる
See the Pen
背景画像を要素の中央に移動させる by 吉井大輝 (@DaiW)
on CodePen.
#box要素の中央に移動させたい場合以下のようにcenterを指定します。
|
1 |
background-position:center; |
値をpercentageにして中央に移動させる場合は、background-position:50%;にします。
まとめ
いかがでしたでしょうか？
今回は、background-positionプロパティの基本的な使い方やさまざまな設定方法についてご紹介しました。
background-positionプロパティの説明をしたコードを参考にすることで、値の指定によってどのように動くのか分かるようになるでしょう。
background-positionプロパティの設定をぜひ試してみてください。
参考文献：MDN web docs｜background-positionプロパティ : CSS のプロパティで、それぞれの背景画像の初期位置を設定します。
