[CSS] 背景画像の表示方法を指定する（background-repeat、background-position）
背景画像の表示方法を指定するには、
background-repeat、background-position を使用します。
単純に背景に画像を指定する
おさらいとして背景に画像を指定するには、background-imageを使用します。
例）背景に以下の画像（./image/sample.png）を指定する
./image/sample.png
|
1 |
<p style="background-image:url('image/sample.png');">あいうえお</p> |
【結果】
あいうえお
background-imageで単純に画像を指定すると、指定した画像を繰り返し表示されます。
背景画像の配置方法を指定する（background-repeat）
background-repeatを使用すると、画像の繰り返し方法を指定できます。
背景画像を縦方向のみ繰り返し表示する（repeat-y）
|
1 |
<p style="background-image:url('image/sample.png');background-repeat:repeat-y;">あいうえお</p> |
【結果】
あいうえお
例）背景画像を横方向のみ繰り返し表示する（repeat-x）
|
1 2 3 |
<p style="background-image:url('image/sample.png');background-repeat:repeat-x;"> あいうえお </p> |
【結果】
あいうえお
例）背景画像を縦方向と横方向に繰り返し表示する（repeat）
|
1 2 3 |
<p style="background-image:url('image/sample.png');background-repeat:repeat;"> あいうえお </p> |
【結果】
あいうえお
background-repeat:repeat がデフォルトの表示方法です。
例）背景画像を繰り返し表示しない（no-repeat）
|
1 2 3 |
<p style="background-image:url('image/sample.png');background-repeat:no-repeat;"> あいうえお </p> |
【結果】
あいうえお
背景画像の位置を微調整する（background-position）
background-positionを使用すると、画像の表示位置を明示的に指定する事ができます。
例）背景画像の位置を左20px、上30pxの位置に指定する
|
1 2 3 4 |
<p style="background-image:url('./image/sample.png'); background-repeat:no-repeat;background-position:20px 30px;"> あいうえお </p> |
【結果】
あいうえお