CSSの背景で表示するbackgroundの設定で、一般的によく使う設定を紹介します。
CSSで画像を背景に設定する
CSSで背景を画像に設定する場合は、下記のように記載します。
background-image: url(イメージファイル名);
例えば、<div class=”sample1″>
に、haikei.pngを背景に設定する場合は、CSSの中に下記のように記載します。
.sample1 {
background-image: url(haikei.png);
}
これが基本です
背景画像を表示されない
背景画像が表示されないケースで多いのが、イメージファイル（例でいうと、haikei.png）のパスが間違っていることです。
相対パスで表示されない場合、絶対パス（http://ドメイン/イメージまでのパス）を設定して表示されるかどうか確認しましょう。
背景画像の繰り返し・リピート（background-repeat）
背景画像は、繰り返し表示する事も可能です。
その場合、
background-repeat で設定します。
例えば、
.sample1
に、haikei.png画像を全面タイルのように繰り返し、リピートする場合は、CSSの中に下記のように記載します。
.sample1 {
background-image: url(haikei.png);
background-repeat: repeat;
}
これで、リピートされます。
逆にリピートさせたくない場合は、
no-repeat; を
background-repeat: に指定します。
.sample1 {
background-image: url(haikei.png);
background-repeat: no-repeat;
}
背景画像のサイズ変更（background-size）
背景画像のサイズの変更、縮小サイズもCSSで指定できます。
background-size
にサイズを指定すれば、変更できます。
90％に縮小した例です。
.sample1 {
background-image: url(haikei.png);
background-repeat: repeat;
background-size: 90%;
}
