背景画像を縦横にリピートさせる

左の画像をX軸、Y軸方向に永遠にリピートさせます。

/* CSS Document */

.case1{
    background-image: url(ここに画像のURLを記入);
    background-repeat:repeat;
}

「repeat-x」で背景画像を横だけにリピートさせる

左の画像を横（X軸）方向に永遠にリピートさせます。
X軸方向のみに繰り返すため下のスペースは白いままとなります。
※「repeat-y」で縦方向（Y軸）になります。「no-repeat」の場合繰り返しはされません。

/* CSS Document */

.case2{
    background-image: url(ここに画像のURLを記入);
    background-repeat: repeat-x; 

}

「background-position」で背景画像の配置場所を指定する

背景画像の位置の初期値を指定します。
何も指定しなければ左上端（top leftまたは0 0）の状態となります。
top：上に配置します
right：右に配置します
bottom：下に配置します
left：左に配置します
center：中央に配置します
数値を指定する場合、2つ記述が順に幅と高さを表します。

/* CSS Document */

.case3{
    background-image: url(ここに画像のURLを記入);
	background-repeat: no-repeat;
	background-position:top center;

}

ピクセル単位での細かい指定も可能です。

/* CSS Document */

.case4{
    background-image: url(ここに画像のURLを記入);
	background-repeat: no-repeat;
	background-position:100px 30px;

}

「background-size」で背景画像のサイズを指定する

数値・パーセンテージを指定する場合、2つ記述が順に幅と高さを表します。1つだけ指定した場合には、もう1つは初期値となります。
負の値を指定することはできません。
auto：自動的に算出されます（初期値）
contain：縦横比を保持して、背景領域の狭い一辺のサイズに合わせて背景画像を拡大縮小します
cover：縦横比を保持して、背景領域を一つの画像で覆うように拡大縮小します
数値：背景画像の幅・高さを指定します
パーセンテージ：背景領域に対する背景画像の幅・高さのパーセンテージを指定します
※ブラウザのバージョンによっては対応していないものもあります。

background-size:contain;を指定した場合。

背景領域の縦幅が150pxなので縦幅のサイズに自動的に拡大されています。（元画像は100pxの正方形です）

/* CSS Document */

.case5{
    background-image: url(ここに画像のURLを記入);
    background-size:contain;

}

background-size:cover;を指定した場合。

背景領域の横幅に合わせて背景画像が引き伸ばされるので画像が荒れてしまいます。

/* CSS Document */

.case6{
    background-image: url(ここに画像のURLを記入);
    background-size:cover;

}

background-size:20px 20px;を指定した場合。

背景指定画像を縦横20pxに縮小させています。

/* CSS Document */

.case7{
    background-image: url(ここに画像のURLを記入);
    background-size:20px 20px;

}

background-size:50% 20%;を指定した場合。

背景領域の横に対して50％、縦に対して20％になるように背景画像をリサイズしているので鋭角な斜線に変わっています。

/* CSS Document */

.case8{
    background-image: url(ここに画像のURLを記入);
    background-size:50% 20%;

}

複数の背景画像を重ねる

同じ背景領域に複数の背景画像を指定することができます。
※右の格子の画像はpng透過画像です。
※ブラウザのバージョンによっては対応していないものもあります。

/* CSS Document */

.case9{
    background-image: url(ここに上に配置する画像のURLを記入),
	url(ここに下に配置する画像のURLを記入);

}

複数の背景画像に対して位置を指定して重ねる

背景領域の4角に黒い影のpng画像を配置し、ケラレのような表現を出します。
※ブラウザのバージョンによっては対応していないものもあります。

/* CSS Document */

.case10{
    background-image: url(ここに左上に配置する画像のURLを記入),
                      url(ここに右上に配置する画像のURLを記入),
                      url(ここに左下に配置する画像のURLを記入),
                      url(ここに左下に配置する画像のURLを記入),
                      url(最後に元となる画像のURLを記入);
	background-repeat: no-repeat,
	                   no-repeat, 
	                   no-repeat, 
	                   no-repeat, 
	                   repeat;
	background-position: top left,
                         top right,
                         bottom left,
                         bottom right,
                         top left;
	background-size: 50% 50%,
	                 50% 50%,
	                 50% 50%,
	                 50% 50%,
	                 auto;

}

ご注意

先頭に付ける-moz-や-webkit-などのベンダープレフィックスの記載は省略しております。そのため、ブラウザのバージョンによっては対応していないものもあります。