[CSS] 背景画像の表示方法を指定する（background-repeat、background-position）

背景画像の表示方法を指定するには、
background-repeat、background-position を使用します。

単純に背景に画像を指定する

おさらいとして背景に画像を指定するには、background-imageを使用します。

例）背景に以下の画像（./image/sample.png）を指定する

./image/sample.png

【結果】

あいうえお

background-imageで単純に画像を指定すると、指定した画像を繰り返し表示されます。

背景画像の配置方法を指定する（background-repeat）

background-repeatを使用すると、画像の繰り返し方法を指定できます。

背景画像を縦方向のみ繰り返し表示する（repeat-y）

【結果】

あいうえお

例）背景画像を横方向のみ繰り返し表示する（repeat-x）

【結果】

あいうえお

例）背景画像を縦方向と横方向に繰り返し表示する（repeat）

【結果】

あいうえお

background-repeat:repeat がデフォルトの表示方法です。

例）背景画像を繰り返し表示しない（no-repeat）

【結果】

あいうえお

背景画像の位置を微調整する（background-position）

background-positionを使用すると、画像の表示位置を明示的に指定する事ができます。

例）背景画像の位置を左20px、上30pxの位置に指定する

【結果】

あいうえお