Sifat background-size

Sifat background-size menetapkan saiz imej latar belakang. Nilai sifat adalah sebarang unit untuk saiz, atau kata kunci auto, cover atau contain.

Sintaks

pemilih {
	background-size: nilai;
}

Kata Kunci

Nilai	Keterangan
`auto`	Latar belakang akan mempunyai saiz semula jadi, seperti saiz sebenar imej latar belakang. Jika `auto` ditetapkan hanya untuk satu sisi, maka pada sisi itu latar belakang akan dimeskan supaya mengekalkan nisbah asal tanpa herotan.
`cover`	Menskala imej supaya ia menutupi keseluruhan blok dengan mengekalkan nisbah. Imej akan cuba muat sepenuhnya, tetapi ini tidak selalu berjaya, jadi sebahagian daripadanya akan dipotong. Blok sentiasa akan ditutupi oleh imej sepenuhnya.
`contain`	Menskala imej supaya ia muat sepenuhnya ke dalam blok dengan mengekalkan nisbah. Dalam kes ini, ia mungkin memenuhi keseluruhan lebar, atau keseluruhan tinggi (bergantung pada nisbah imej dan saiz elemen). Blok secara amnya tidak akan ditutupi sepenuhnya oleh imej (tetapi imej sentiasa akan kelihatan sepenuhnya, walaupun dalam versi mengecut).

Nilai lalai: auto.

Penggunaan

Unit untuk saiz dan auto boleh digunakan dalam pelbagai kombinasi, contohnya: auto 20px, atau 30% 20px, atau auto 30% dan sebagainya. Dalam kes ini, parameter pertama menetapkan saiz latar belakang mengikut lebar, dan parameter kedua - saiz latar belakang mengikut tinggi. Jika satu parameter dinyatakan - ia akan menetapkan saiz latar belakang mengikut lebar, dan mengikut tinggi secara serentak.

Contoh

Sekarang imej latar belakang akan mempunyai saiz semula jadinya:

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

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

Contoh

Sekarang imej latar belakang akan bersaiz 300px kali 400px (dalam kes kami, nisbah imej akan terherot):

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

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

Contoh

Sekarang imej latar belakang akan bersaiz 400px kali 400px (dalam kes kami, nisbah imej akan terherot):

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

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

Contoh

Sekarang imej latar belakang akan bersaiz 400px secara mendatar, dan secara menegak saiznya akan disesuaikan supaya nisbah tidak terherot:

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

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

Contoh

Sekarang imej latar belakang akan bersaiz 400px secara menegak, dan secara mendatar saiznya akan disesuaikan supaya nisbah tidak terherot:

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

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

Contoh . Nilai contain

Lihat pada kerja nilai contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Contoh . Nilai cover

Lihat pada kerja nilai cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Contoh . Menambah baik kerja cover

Kerja nilai cover boleh ditambah baik, jika imej diletakkan di tengah dengan bantuan sifat background-position (dalam kes kami, bahagian kelihatan akan mula menunjukkan kepala kuda, dan bukan punggungnya):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Lihat juga

sifat background,
merupakan sifat singkatan untuk latar belakang