Properti background-size

Properti background-size mengatur ukuran gambar latar belakang. Nilai properti dapat berupa satuan ukuran apa pun, atau kata kunci auto, cover atau contain.

Sintaks

selektor {
	background-size: nilai;
}

Kata Kunci

Nilai	Deskripsi
`auto`	Latar belakang akan memiliki ukuran natural, seperti ukuran asli gambar latar belakang. Jika `auto` hanya ditentukan untuk satu sisi, maka pada sisi tersebut latar belakang akan diskalakan agar proporsinya tidak terdistorsi.
`cover`	Menskalakan gambar sehingga menutupi seluruh blok dengan mempertahankan proporsi. Gambar akan berusaha muat sepenuhnya, tetapi ini tidak selalu berhasil, sehingga sebagian gambar akan terpotong. Blok akan selalu tertutup oleh gambar secara penuh.
`contain`	Menskalakan gambar sehingga muat sepenuhnya ke dalam blok dengan mempertahankan proporsi. Gambar mungkin akan memenuhi seluruh lebar, atau seluruh tinggi (tergantung pada proporsi gambar dan dimensi elemen). Secara umum, blok tidak akan sepenuhnya tertutup oleh gambar (namun gambar akan selalu terlihat utuh, meskipun dalam versi yang diperkecil).

Nilai default: auto.

Penggunaan

Satuan ukuran dan auto dapat digunakan dalam berbagai kombinasi, misalnya: auto 20px, atau 30% 20px, atau auto 30%, dan seterusnya. Dalam hal ini, parameter pertama menentukan ukuran lebar latar belakang, dan parameter kedua - ukuran tinggi latar belakang. Jika hanya satu parameter yang ditentukan - maka parameter tersebut akan menentukan ukuran latar belakang untuk lebar dan tinggi secara bersamaan.

Contoh

Sekarang gambar latar belakang akan memiliki ukuran naturalnya:

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

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

Contoh

Sekarang gambar latar belakang akan berukuran 300px kali 400px (dalam kasus kita, proporsi gambar akan terdistorsi):

<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 gambar latar belakang akan berukuran 400px kali 400px (dalam kasus kita, proporsi gambar akan terdistorsi):

<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 gambar latar belakang akan berukuran 400px secara horizontal, dan secara vertikal ukurannya akan menyesuaikan agar proporsi tidak terdistorsi:

<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 gambar latar belakang akan berukuran 400px secara vertikal, dan secara horizontal ukurannya akan menyesuaikan agar proporsi tidak terdistorsi:

<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 cara 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 cara 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 . Meningkatkan kerja cover

Cara kerja nilai cover dapat ditingkatkan, jika gambar dipusatkan menggunakan properti background-position (dalam kasus kita, bagian yang terlihat akan mulai menampilkan kepala kuda, bukan pantatnya):

<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

properti background,
yang merupakan properti singkatan untuk latar belakang