#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. background-repeat

background-repeat

背景画像の繰り返し

background-repeatプロパティは、背景画像のリピートの仕方を指定する際に使用します。
垂直、水平、その両方に対して繰り返しの有無を指定できます。
背景画像を縦や横に連続して表示する事もできますので、全面やワンポイントで画像を使う以外に、背景を違ったイメージで表示する事ができます。

repeat-x, repeat-y, repeat, no-repeat, space, round の値を1つ、またはrepeat-xとrepeat-yを除いた4つのうち、半角スペースで区切って2つを指定できます。1つの場合は横・縦方向の両方、2つの場合は横方向、縦方向の順の指定になります。
また、spaceとroundはCSS3で追加されたプロパティなので、古いブラウザやモバイル端末では未対応の場合がありますので注意が必要です。(PCの新しいブラウザは対応済み。2017/04現在)

background-repeat: repeat; /* 縦横に背景画像を繰り返して表示します。(初期値)*/
background-repeat: no-repeat; /* 背景画像を一回だけ表示して繰り返しません。 */
background-repeat: repeat-x; /* x軸方向(横方向)に繰り返し表示します。(repeat no-repeat) */
background-repeat: repeat-y; /* y軸方向(縦方向)に繰り返し表示します。(no-repeat repeat) */
background-repeat: space; /* 領域からはみ出ないように間隔が調整されて繰り返し表示します。CSS3 */
background-repeat: round; /* 領域内に収まるように自動的に拡大・縮小されて繰り返し表示します。CSS3 */

横方向に繰り返し

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-x;
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例1-2(div boxに指定)*/
.sample1-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-x;
}
例1-2:背景画像を上に並べて表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)

横方向(下段)に繰り返し

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-x;
   background-position: bottom; /* (center) bottom */
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例2-2(div boxに指定)*/
.sample2-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-x;
   background-position: bottom; /* (center) bottom */
}
例2-2:背景画像を下に並べて表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)

縦方向に繰り返し

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-y;
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例3-2(div boxに指定)*/
.sample3-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-y;
}
例3-2:背景画像を左に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)

縦方向(右側)に繰り返し

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-y;
   background-position: right; /* right (center) */
}
/* 背景固定は background-attachment: fixed; を追加 */
/* 例4-2 */
.sample4-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-y;
   background-position: right; /* right (center) */
}

/* 例4-3 */
.sample4-3{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat-y;
   background-position: right 17px center;  /* 右端からの距離 center */
}

div等のboxは、背景画像にfixedを指定すると(画像の表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有ります。(fixedは指定しない。)
例4-2のように画像の表示位置が右で、PC閲覧時にboxの右側にスクロールバーが出る場合(overflow:で autoやscroll)、background-position: 値; でboxに右端からの表示位置を設けるか、若しくは左端から右への移動分を設定しないと(rightではスクロールバーと重なってしまい)画像が欠けてしまうので注意が必要です。
背景画像の配置位置のページもご参考に。)

例4-2:背景画像を右に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)
例4-3:背景画像を右に表示しています。
ページのdiv boxに指定・表示しています。
div等のboxは、背景画像にfixedを指定すると(画像表示位置がboxでは無くウィンドウを基準とした位置になるので)画像の並び方によってはbox内に表示されない場合が有るので注意して下さい。(fixedは指定しない。)

等間隔に間を空けて配置

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: space;
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例5-2(div boxに指定)*/
.sample5-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: space;
}

背景領域全てを覆うように繰り返されます。縦横両方向とも、全て収まる最大個数を繰り返し、等間隔にスペースを空けて表示されます。新しいCSS3なため、ブラウザによっては未対応な場合があります。

例5-2:背景画像をspaceで表示しています。
ページのdiv boxに指定・表示しています。
背景領域全てを覆うように繰り返されます。縦横両方向とも、全て収まる最大個数を繰り返し、等間隔にスペースを空けて表示されます。新しいCSS3なため、ブラウザによっては未対応な場合があります。

完全に埋めるように配置

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: round;
}
/* 背景固定は background-attachment: fixed; を追加 */

/* 例6-2(div boxに指定)*/
.sample6-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: round;
}

背景領域全てを覆うように繰り返されます。縦横両方向とも、完全に収めるために背景画像を拡大・縮小し、収まる最大個数を繰り返して表示されます。新しいCSS3なため、ブラウザによっては未対応な場合があります。

例6-2:背景画像をroundで表示しています。
ページのdiv boxに指定・表示しています。
背景領域全てを覆うように繰り返されます。縦横両方向とも、完全に収めるために背景画像を拡大・縮小し、収まる最大個数を繰り返して表示されます。新しいCSS3なため、ブラウザによっては未対応な場合があります。