Tutorial Belajar CSS Bagian 48 : Cara Menggunakan Property Background Size di CSS

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 47 : Cara Menggunakan Property Background Attachment di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property background size di CSS untuk mengatur ukuran gambar latar belakang.

Properti CSS background-size digunakan untuk mengatur ukuran gambar latar belakang suatu elemen. Gambar latar belakang dapat direntangkan atau dibatasi agar sesuai dengan ruang yang ada. Ini memungkinkan kita untuk mengontrol penskalaan gambar latar belakang.

Properti ini dapat ditentukan menggunakan length, percentage, atau nilai keyword (kata kunci).

Ini memiliki dua kemungkinan nilai keyword yang contain dan cover. Sintaks nilai tunggal menentukan lebar gambar (dalam hal ini, tinggi diatur ke otomatis), sedangkan nilai ganda menentukan nilai tinggi dan lebar di mana nilai pertama mengatur lebar dan kedua mengatur tinggi.

Jika suatu elemen memiliki banyak gambar latar belakang, kita dapat menentukan nilai yang dipisahkan koma untuk menentukan ukuran yang berbeda dari masing-masing gambar.

Nilai cover dari properti background-size digunakan untuk menutupi seluruh area latar belakang elemen. Sebaliknya, nilai properti contain ini menskala gambar sebanyak mungkin tanpa memotong gambar.

Sintaksis

background-size: auto | length | cover | contain | initial | inherit; 

Nilai properti ini didefinisikan sebagai berikut.

Nilai Properti

  • Auto : Ini adalah nilai default, yang menampilkan gambar latar belakang dalam ukuran aslinya.
  • Length : Digunakan untuk mengatur lebar dan tinggi gambar latar belakang. Nilai ini meregangkan gambar dalam dimensi yang sesuai dengan panjang yang diberikan. Nilai tunggalnya menentukan lebar gambar, dan tingginya diatur ke otomatis. Jika dua nilai diberikan, nilai pertama mengatur lebar, dan nilai kedua mengatur tinggi. Itu tidak memungkinkan nilai negatif.
  • Percentage : Nilai ini menentukan lebar dan tinggi gambar latar belakang hingga persentase (%) area pemosisian latar belakang. Nilai negatif tidak diperbolehkan.
  • Cover : Nilai ini digunakan untuk mengubah ukuran gambar latar untuk menutupi seluruh container. Kadang-kadang, ini memotong sedikit dari salah satu tepi atau melebarkan gambar. Ini mengubah ukuran gambar untuk memastikan elemen tertutup sepenuhnya.
  • Contain : Tanpa meregangkan atau memotong, ini mengubah ukuran gambar latar belakang untuk memastikan gambar benar-benar terlihat.
  • Initial : Ini mengatur properti ke nilai defaultnya.
  • Inherit : Ini mewarisi properti dari elemen induknya.

Mari kita pahami properti CSS ini dengan menggunakan beberapa contoh.

Dalam contoh ini, ada tiga elemen div dengan lebar 300px dan tinggi 200px. Setiap elemen div memiliki background-image tempat kita menerapkan properti background-size.

Di sini kita menggunakan nilai length dan percentage untuk mengatur ukuran latar belakang elemen div. Ukuran latar belakang elemen div pertama disetel ke auto, elemen div kedua disetel ke 150px 150px, dan ukuran latar belakang elemen div ketiga disetel ke 30%.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
Properti background-size  
</title>  
<style>  
  div {  
  width: 300px;  
  height: 200px;  
  border: 2px solid red;  
  }  
  #div1{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg');  
  background-size: auto;  
  }  
  #div2{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg');  
  background-size: 150px 150px;  
  }  
  #div3{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg');  
  background-size: 30%;  
  }  
</style>  
</head>  
  
<body>  
  <h2> background-size: auto; </h2>  
  <div id = "div1"></div>
  <h2> background-size: 150px 150px; </h2>  
  <div id = "div2"></div>  
  <h2> background-size: 30%; </h2>  
  <div id = "div3"></div>  
</body>  
</html>  

Sekarang, pada contoh berikutnya, kita menggunakan nilai cover, contain, dan initial dari background-size properti.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
Properti background-size  
</title>  
<style>  
  div {  
  width: 300px;  
  height: 250px;  
  border: 2px solid red;  
  background-repeat: no-repeat;  
  }  
  #div1{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg');  
  background-size: contain;  
  }  
  #div2{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg');  
  background-size: cover;  
  }  
  #div3{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg');  
  background-size: initial;  
  }  
</style>  
</head>  
  
<body>  
  <h2> background-size: contain; </h2>  
  <div id = "div1"></div>  
  <h2> background-size: cover; </h2>  
  <div id = "div2"></div>  
  <h2> background-size: initial; </h2>  
  <div id = "div3"></div>  
</body>  
</html>

Menggabungkan beberapa gambar

Kita juga dapat menggabungkan nilai properti ini dan dapat menerapkannya ke banyak gambar. Ini dapat dilakukan dengan sintaks yang dipisahkan koma.

Dalam contoh ini, ada tiga elemen div, masing-masing memiliki dua gambar latar. Sekarang, kita menerapkan properti background-size pada kedua gambar.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
background-size property  
</title>  
<style>  
div {  
  width: 250px;  
  height: 250px;  
  border: 2px solid red;  
  background-repeat: no-repeat;  
  background-position: center;  
  }  
  #div1{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg'), url('https://mbahwp.com/wp-content/uploads/2023/09/hutan.jpeg');  
  background-size: 300px 150px, cover;  
  }  
  #div2{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg'), url('https://mbahwp.com/wp-content/uploads/2023/09/hutan.jpeg');  
  background-size: 200px 150px, 300px 200px;  
  }  
  #div3{  
  background-image: url('https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg'), url('https://mbahwp.com/wp-content/uploads/2023/09/hutan.jpeg');  
  background-size: 150px 175px, contain;  
  }  
</style>  
</head>  
  
<body>  
  <h2> background-size: 300px 150px, cover; </h2>  
  <div id = "div1"></div>  
  <h2> background-size: 200px 150px, 300px 200px; </h2>  
  <div id = "div2"></div>  
  <h2> background-size: 150px 175px, contain; </h2>  
  <div id = "div3"></div>  
  
</body>  
</html> 

Semoga tutorial background size ini membantu Anda untuk memahami cara menggunakan property background size dalam mengatur gambar latar belakang di website Anda.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0