スタイルシート講義 ～背景画像の取り入れ方～

これにはまず下準備がございます。
メニューからスタイルシートを選び、ページ底部の「スタイルシート用画像」をクリック。

するとこんな画面が出てきますね。
「ページを追加する」をクリックします。
そこで画像を登録するのですが、保存できる画像はブログ内でUPするときとおなじ「100Ｋ」以内です。
ここで気をつけなければいけないのは、画像の「解像度」。
「明るさやコントラスト」を暗めに設定してブログ内の文字が見えやすいように配慮することが大切です。

さて、今度はスタイルシートに打ち込んでいきます。

まずは
「background-image: url('')；」
を画像のように「body」の欄に打ち込みます。
（'ここに先ほど登録した画像のURLを入力'）

「’」が欠けると認識されませんし、すべて半角で打ち込みます。

次は
「background-repeat: no-repeat；」
背景画像を「repeat」にすると、画像が画面より小さい場合、画面内一杯に重複して画像が表示されます。
「no-repeat」は１枚のみ表示します。

最後に
「background-position:center bottom；」
背景画像の位置を決めます。
「center bottom」は画面中央底部。
「center」の場合は画面中央。

以下「left,center,right」や、「top,center,bottom」を組み合わせることによって任意の場所に画像を貼り付けることが出来ます。