backgroundで背景指定

CSS編集画面にbackgroundを記述することで、指定コンテンツに背景画像を表示する事や背景色を変えることが出来ます。

backgroundの指定方法

「background:色 url("画像アドレス") 表示位置繰り返し;」

上記を一セットとして記述します。(実際はもっと細かい指定も可能です。)

【色】: 色を指定することで対象コンテンツの背景色を変えることが出来ます。色はhtmlカラーコードで指定します。
【url("画像アドレス")】: 画像アドレスの部分に任意の画像を指定すると、指定した画像が対象コンテンツの下に表示されます。画像アドレスの知り方はこちら
【表示位置】: 表示位置は背景に指定した画像をどこを基点にして表示するか決めるものです。詳しい説明は後述します。
【繰り返し】: 繰り返しは背景画像を繰り返すかどうか決めるものです。詳しい説明は後述します。

表示位置の指定は【top/right/center/bottom/left】と数値で指定し、指定する際は【left/right】と【top/bottom】を組み合わせて使います。

【left/right】は左右、【top/bottom】は上下どちらを基点にするか指定します。

例えば「left top」を指定した場合はコンテンツの左上を基点にして、背景画像が表示されます。「right bottom」だと右下を基点。

これをcenterに変えると基点が中央になります。「center top」だと中央の上部を基点。「left center」だと左端の真ん中が基点。

数値で指定すると【top/right/center/bottom/left】より細かく位置調整をする事が出来ます。

例えば「100px 50px」とした場合は、左から100px、上から50pxの位置を基点として背景画像が表示されます。

繰り返しは以下の四つで指定します。

対象{
background:#ffffff url("画像アドレス") left top repeat;
}

上記のように指定すると「対象」の左上を基点にして全面に画像が表示されます。