ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。背景の設定にはCSSを使うことが多いのですが、背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。

背景の指定について

背景を指定するには、backgroundというプロパティを使います。backgroundを使うと、背景色の指定や背景画像の設置ができます。しかも、複雑な設定をすることなく、背景画像を設置位置やサイズなど細かな調整を行い、理想のデザインを構築できるのがメリットです。backgroundでよく使うプロパティを覚えて、思った通りのデザインができるようになると楽しくなります。

背景に画像を指定する方法

背景に画像を設置するには、background-imageというプロパティを使います。サーバーにアップロードしている画像を呼び出して表示することができます。基本的な使い方は以下のような記述です。

background-image: url(“画像パス”);

画像パスは、絶対パスと相対パスのどちらでも指定可能です。絶対パスとは、URLを指定することで、画像の位置を正確に指定するものです。それに対し、相対パスは現在の階層を基準にして画像の位置を指定するものです。相対パスの指定は、絶対パスより記述が簡単に済みます。

背景画像の色々な使い方

背景画像は、必ずしも背景一面に設置するとは限りません。画像の大きさや設置する位置をコントロールすることで、幅広いデザインが可能になるのです。画像を並べて模様を構成すると、オリジナリティの高い背景を設置できます。このようなパターンを構築するには、リピートを使いこなすことが必要です。

ここで紹介するリピートの指定は以下の4種類です。background-repeatというプロパティを使います。

1）背景画像を縦と横に繰り返し表示する（repeat）
以下のように記述すると、相対パスを指定したsampleという画像を縦と横の両方に繰り返し表示します。画像次第で、全面水玉模様の背景などを簡単に作ることができます。

background-image: url(img/sample.png);
background-repeat: repeat;

2）背景画像を繰り返さない（no-repeat）
背景画像を繰り返さず、一つだけ表示したい場合はno-repeatを指定します。先ほどのrepeatをno-repeatに変更するだけなので簡単です。

background-image: url(img/sample.png);
background-repeat: no-repeat;

  1. 背景画像を横に繰り返す（repeat-x）
    背景画像を横だけに繰り返す方法もあります。この場合は、repeat-xを使用します。X軸に画像をリピートするという意味です。

background-image: url(img/sample.png);
background-repeat: repeat-x;

  1. 背景画像を縦に繰り返す（repeat-y）
    背景画像を縦に繰り返す場合は、repeat-yを使用します。Y軸に画像を繰り返すという指定です。

background-image: url(img/sample.png);
background-repeat: repeat-y;