CARA MENAMBAHKAN BACKGROUND IMAGE DI CSS

CSS (Cascading Style Sheet) adalah bahasa stylesheet yang digunakan dalam pengembangan web untuk mendesain dan memformat tampilan sebuah website. Salah satu fitur CSS yang paling menarik adalah kemampuannya untuk menambahkan background image pada sebuah website. Dalam artikel ini, kamu akan belajar bagaimana cara menambahkan background image di CSS dengan langkah-langkah sederhana dan mudah dipahami.

Memilih Gambar untuk Background

Sebagai langkah pertama, kamu membutuhkan gambar yang akan menjadi background. Pastikan gambar tersebut mengandung lisensi yang memungkinkan penggunaannya, telah memiliki resolusi yang cukok serta ukuran file yang ideal.

Mengunduh Gambar

Untuk mengunduh gambar, kamu bisa menggunakan beberapa situs penyedia gambar gratis seperti Pixabay, Unsplash, dan sebagainya. Setelah menemukan gambar yang diinginkan, klik kanan pada gambar dan pilih “Save Image As” untuk menyimpan gambar ke komputer kamu.

Menambahkan Background Image Menggunakan CSS

Setelah gambar siap, saatnya menambahkan background image ke website kamu. Ada beberapa cara untuk melakukan ini:

Menggunakan Properti background-image

Cara paling umum untuk menambahkan latar belakang adalah melalui CSS menggunakan properti background-image. Untuk melakukan ini, arahkan ke file CSS dan temukan elemen yang ingin kamu tambahkan background image. Berikut adalah contoh penggunaan properti background-image:

.selector {
  background-image: url('path/ke/gambar.jpg');
}

Ganti .selector dengan selektor CSS yang kamu inginkan, seperti .class, #id, atau elemen HTML.

Mengatur Position dan Size

Jika kamu ingin mengatur posisi gambar atau mengubah ukuran, kamu bisa menggunakan properti background-position dan background-size.

.selector {
  background-image: url('path/ke/gambar.jpg');
  background-position: center; /* mengatur posisi */
  background-size: cover; /* mengatur ukuran */
}

Dengan begitu, kamu sudah berhasil menambahkan background image di CSS. Mudah bukan? Dengan pengetahuan ini, kamu sekarang memiliki kontrol lebih besar atas desain situs web kamu. Jadi, mulai uji coba dan lihat apa yang bisa kamu ciptakan!