Ciri background-repeat

Ciri background-repeat menetapkan cara mengulang imej latar belakang elemen. Secara lalai, imej diulang pada paksi X dan paksi Y, dengan itu menutupi keseluruhan kawasan yang tersedia.

Sintaks

cssselector {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Nilai

Nilai	Keterangan
`no-repeat`	Imej tidak akan diulang langsung.
`repeat-x`	Imej akan diulang pada paksi X.
`repeat-y`	Imej akan diulang pada paksi Y.
`repeat`	Imej akan diulang pada paksi X dan paksi Y.
`space`	Imej akan diulang sebanyak kali yang diperlukan untuk memenuhi kawasan sepenuhnya, jika ini tidak dapat dicapai, ruang kosong ditambah antara imej.
`round`	Imej akan diulang supaya sejumlah integer imej muat dalam kawasan, jika ini tidak dapat dicapai, imej latar belakang akan dizezakankan.

Nilai lalai: repeat - menutupi keseluruhan skrin dengan corak.

Contoh

Secara lalai, imej latar belakang akan menutupi keseluruhan elemen:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Contoh

Mari kita buat supaya imej tidak diulang:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Contoh

Sekarang biarkan imej diulang pada paksi X:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Contoh

Sekarang pada paksi Y:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Contoh

Imej yang diulang pada paksi boleh diposisikan menggunakan ciri background-position:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Contoh

Mari lihat bagaimana nilai space berfungsi:

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Contoh

Mari lihat bagaimana nilai round berfungsi:

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Lihat juga

ciri background,
yang merupakan ciri singkatan untuk latar belakang