CARA MENGATUR UKURAN BACKGROUND IMAGE DI CSS

CSS (Cascading Style Sheets) merupakan bagian penting dalam membuat tampilan website menjadi menarik. Salah satu elemen yang bisa diatur dengan CSS adalah gambar latar belakang atau background image. Bagi kamu yang belum tahu, berikut ini adalah cara mudah untuk mengatur ukuran gambar latar belakang dengan CSS.

Memilih Gambar Latar Belakang

Pertama, kamu harus memilih gambar mana yang akan dijadikan latar belakang. Pilih gambar yang sesuai dengan tema website kamu dan pastikan ukurannya cukup besar agar tidak pecah saat diperbesar. Setelah itu, kamu bisa meletakkan gambar tersebut di folder yang sama dengan file CSS kamu.

Kode CSS untuk memasukkan gambar latar belakang adalah sebagai berikut:

body {
  background-image: url("gambar.jpg");
}

Ganti “gambar.jpg” dengan nama file gambar yang kamu pilih.

Mengatur Ukuran Gambar Latar Belakang

Setelah gambar latar belakang berhasil dimasukkan, tahap selanjutnya adalah mengatur ukuran gambar tersebut. CSS sendiri menyediakan beberapa pilihan cara untuk melakukan hal ini.

background-size: cover;

Menggunakan cover akan membuat gambar menyesuaikan dengan luas elemen, namun tetap mempertahankan rasio aspeknya.

body {
  background-image: url("gambar.jpg");
  background-size: cover;
}

background-size: contain;

Berbeda dengan cover, menggunakan contain akan membuat gambar menyesuaikan dengan lebar atau tinggi elemen dan mungkin menyisakan ruang kosong di salah satu sisi.

body {
  background-image: url("gambar.jpg");
  background-size: contain;
}

Mengatur Ukuran Secara Bebas

Jika kamu ingin mengatur ukuran gambar secara bebas, kamu bisa menggunakan satuan pixel (px), persen (%), atau viewport (vw, vh).

body {
  background-image: url("gambar.jpg");
  background-size: 200px 150px;
}

Perlu diingat bahwa cara ini mungkin akan mengubah rasio aspek gambar.

Demikianlah beberapa cara untuk mengatur ukuran gambar latar belakang di CSS. Jangan takut untuk bereksperimen dan coba berbagai cara sampai kamu mendapatkan tampilan yang diinginkan!