https://www.billionwallet.com > CSS > background-repeat背景設定2

background-repeat背景設定2

背景画像の繰り返しの表示方法を指定するプロパティです。

no-repeat

background-repeat: no-repeat; /*１度だけ表示*/

body {
    background-image: url("background_sample.gif");
    background-repeat: no-repeat;
}

repeat

background-repeat: repeat; /*繰り返し表示(初期値)*/
background-repeat: repeat no-repeat; /*同様の結果を表示。*/

body {
    background-image: url("background_sample.gif");
    background-repeat: repeat;
}

repeat-x

background-repeat: repeat-x; /*背景画像を水平方向に並べる。*/

body {
    background-image: url("background_sample.gif");
    background-repeat: repeat-x;
}

repeat-y

background-repeat: repeat-y; /*背景画像を垂直方向に並べる。*/
background-repeat: no-repeat repeat; /*同様の結果を表示。*/

body {
    background-image: url("background_sample.gif");
    background-repeat: repeat-y;
}

space

background-repeat: space; /* 背景画像は指定された方向に切り抜き無しで描画領域全体に繰り返されます。*/

body {
    background-image: url("background_sample.gif");
    background-repeat: space;
}

repeat-x,repeat-y

background-repeat: repeat-x,repeat-y; /*repeat-x+repeat-yの表示結果。*/

body {
   background-image:url("images/background_sample2.gif"),url("images/background_sample3.gif");
   background-repeat:repeat-x,repeat-y;
}

background-position	center：中央に表示します。 left：左側に表示します。 right：右側に表示します。 top：上部に表示します。 bottom：下部に表示します。 percentage(%)：上部に表示します。

Prev 12Next