いちから始めるホームページ作成

HTML・CSSのことがよくわかる初心者から始めるホームページ制作

background-position

background-positionとは?

background-positionは、背景画像の表示開始位置を指定するCSSです。

色や画像、画像の表示開始位置、リピートなどをbackgroundでまとめて指定することもできます。

background-positionの使い方

top、right、bottom、left、centerなどのキーワードや%、px(ピクセル)で背景画像を指定します。

記述方法は水平方向・垂直方向の順番で、半角スペースで区切ります。

%・pxで指定する場合は、左・上それぞれどれくらいのスペースを空けてから表示するかを指定します。

一つだけ指定した場合は、水平方向のみになり、垂直方向は中央になります。

記述方法

background-positionは以下のように記述します。

キーワードで左上から表示する場合

background-position:left top;

%で左10%、上20%空けてから表示する場合

background-position:10% 20%;

pxで左10px、上20px空けてから表示する場合

background-position:10px 20px;
HTMLタグ
CSS
一口メモ
サンプルソース
用語集