2.1 background-position プロパティ
CSSのbackground-positionプロパティは、要素内の背景画像の開始位置を指定するために使われるよ。
このプロパティは、要素の中で背景画像がどこに配置されるかを正確に決めることができるんだ。background-position
を使って背景画像の表示を細かく調整したり、もっと複雑なデザインを作ったりできるよ。
background-positionの構文
background-positionプロパティは、背景画像の水平と垂直の位置を示す2つの値を取るんだ：
background-position: 水平位置 垂直位置;
値が1つだけ指定された場合、デフォルトで2つ目の値はcenterと見なされるよ。
水平と垂直の位置の値は、次のようなものがあるよ：
-
キーワード:
left: 左揃えcenter: 中央揃えright: 右揃えtop: 上揃えbottom: 下揃え
-
パーセンテージ値:
- 例えば、50% 50%は画像を中央に配置する
- パーセンテージ値は画像ではなく要素のサイズに関連しているんだ
-
ピクセル値:
- 例えば、10px 20pxは画像を左から10ピクセル、上から20ピクセルの位置に配置する
-
値の組み合わせ:
- キーワードとパーセンテージ値を組み合わせることができる、例えばleft 50%
2.2 キーワード
キーワード:
left,center,right: 水平揃えtop,center,bottom: 垂直揃え
キーワードの使用例
画像が左上に配置されるよ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left top; /* 画像が左上に配置される */
}
画像が真ん中に配置されるよ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: center center; /* 画像が真ん中に配置される */
}
画像が右下に配置されるよ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: right bottom; /* 画像が右下に配置される */
}
2.3 パーセンテージ
パーセンテージ値は要素サイズに対する画像の位置を示すよ。
パーセンテージの使用例
画像が真ん中に配置されるよ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 50% 50%; /* 画像が真ん中に配置される */
}
画像が左上に配置されるよ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 0% 0%; /* 画像が左上に配置される */
}
画像が右下に配置されるよ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 100% 100%; /* 画像が右下に配置される */
}
2.4 絶対単位 (px, em, rem)
ピクセルや他の絶対単位を使うと、画像を正確に配置できるんだ。
画像が真ん中に配置されるよ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 10px 20px; /* 左上から右に10ピクセル、下に20ピクセルの位置に画像が配置される */
}
div {
background-image: url('path/to/image.jpg');
background-position: 2em 3em; /* 右に2em、下に3emの位置に画像が配置される */
}
2.5 値の組み合わせ
キーワードと絶対単位を組み合わせて、より正確な位置指定ができるよ。
値の組み合わせ:
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left 20px top 10px; /* 左上から右に20ピクセル、下に10ピクセルの位置に画像が配置される */
}
GO TO FULL VERSION