背景に画像を読み込む

background-imageプロバティで背景画像を指定

背景に画像を読み込むには、 cssbackground-imageプロパティを使用します。 [url ( 函像ファイルのパス)]を値として設定します。ここではbodyタグにbackground-imageプロパティを設定した例を紹介しています。ブラウ ザで表示すると、指定した画像が、縦・横に埋め尽くされるように並びます。この並び方を変更するにはbackground-repeatプ口パティを設定します。

背景画像の並びを指定する

backround-image プロパティを使って背景画像を読み込でい る 場 合 、 その並び方を background-repeatプロパティで指定することができます。設定できる値は下表のとおりです。サンプルでは水平方向にのみ並べています。背景画像を読み込んでいる場合、 background-position プロパティでその位置を指定することもできます。左から の位置(X座標) と、上からの位置 (Y座標)を順に指定し ます。 X座標Y座標は具体的な長さを単位付きの数値で指定できるほか、下衰のキーワードによる指定もでき ます。ただし、一方をキーワードで指定した場合は他方 もキーワードで指定する必要があります。

背景のスクロールの有無を設定

background-imageプロパティを使って背景画像を読み 込んでいる場合、画面をスクロールさせた際に画像もス クロールするかどうかを background-attachmentプロハティで設定できます。 [scroll] を設定すると画面のスクロールにともなって画像もスクロールしますが、[fixed]を設定するとスクロールしません。

背景に関する設定はbackgroundプロパティ 1つでまと めて行うことができます。値には background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionの各プロパティを列 挙します。