CARA MENGATUR BACKGROUND IMAGE DI CSS

Mengatur background image pada halaman website atau web aplikasi bisa memberikan nuansa yang lebih hidup dan menarik. Salah satu cara untuk melakukan hal tersebut adalah dengan menggunakan CSS (Cascading Style Sheets), sebuah bahasa style sheet yang digunakan untuk mendesain tampilan situs web. Berikut ini adalah panduan mudah dalam mengatur background image menggunakan CSS.

Langkah Pertama: Menyiapkan Gambar

Sebelum kita memulai, pastikan kamu sudah memiliki gambar yang akan digunakan sebagai background. Kamu bisa mendapatkan gambar dari berbagai sumber, baik itu dari situs penyedia gambar gratis atau gambar buatan sendiri. Jangan lupa untuk menyesuaikan ukuran gambar dengan kebutuhan.

Langkah Kedua: Menyimpan Gambar di Folder yang Tepat

Simpan gambar yang akan menjadi background di dalam folder proyek website kamu. Biasanya, gambar disimpan di dalam folder khusus yang disebut “images” atau “img”. Hal ini bertujuan untuk membuat struktur file menjadi lebih rapi dan mudah dikelola.

Langkah Ketiga: Menggunakan Properti “Background-Image”

Sekarang, saatnya kita mulai menulis kode CSS. Untuk mengatur background image, kita akan menggunakan properti CSS yang bernama “background-image”. Berikut adalah contoh penggunaannya:

body {
    background-image: url('path/namafile.extension');
}

Ganti ‘path/namafile.extension’ dengan path dan nama file gambar yang kamu gunakan. Misalnya, jika kamu menyimpan gambar di dalam folder “img” dan nama file gambarnya adalah “background.jpg”, maka kode CSS nya menjadi seperti ini:

body {
    background-image: url('img/background.jpg');
}

Langkah Keempat: Mengatur Posisi dan Ukuran Background

Kamu juga bisa mengatur posisi dan ukuran dari background image menggunakan properti “background-position” dan “background-size”. Berikut adalah contohnya:

body {
    background-image: url('img/background.jpg');
    background-position: center;
    background-size: cover;
}

Pada contoh di atas, background-position: center; berarti gambar akan ditengah-tengahkan, dan background-size: cover; berarti gambar akan diperbesar atau diperkecil agar sesuai dengan ukuran layar.

Sekian tutorial mengenai cara mengatur background image di CSS. Dengan memahami dasar-dasar ini, kamu sudah dapat menciptakan tampilan website yang menarik. Selamat mencoba!