CARA MEMBUAT BACKGROUND IMAGE DI CSS

Membuat website menjadi lebih menarik dapat dilakukan dengan berbagai cara. Salah satunya adalah dengan menambahkan background image. Pada artikel ini, kami akan membahas bagaimana cara membuat background image di CSS.

Menyiapkan Gambar

Sebelum memulai, pastikan kamu sudah memiliki gambar yang akan digunakan sebagai background. Kamu bisa mendapatkannya dari berbagai sumber online atau menggunakan karya sendiri. Gambar yang baik biasanya adalah yang memiliki resolusi tinggi dan tidak terlalu berantakan agar tidak mengganggu konten yang ada di depannya.

Setelah kamu mendapatkan gambarnya, letakkan di dalam folder yang sama dengan file CSS kamu, atau kami sarankan untuk membuat folder khusus untuk semua gambar terkait website agar lebih rapi.

Misalnya, kita memiliki gambar dengan nama ‘background.jpg’ dan kita letakkan di dalam folder bernama ‘images’.

Menambahkan Background Image di CSS

Untuk menambahkan background image di CSS, kita perlu mengedit file CSS yang digunakan. Kamu bisa menggunakan text editor favorit kamu untuk melakukan ini.

Berikut adalah kode yang bisa kamu gunakan:

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

Kode di atas akan mengubah background seluruh halaman website kamu menggunakan gambar ‘background.jpg’ yang ada di dalam folder ‘images’.

Mengatur Posisi dan Ukuran Gambar

Setelah menambahkan background image, kamu mungkin ingin mengatur posisi dan ukuran gambar tersebut.

Posisi Gambar

Untuk mengatur posisi gambar, kamu bisa menggunakan properti background-position. Dalam kode berikut ini, gambar akan diletakkan di tengah-tengah halaman:

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

Ukuran Gambar

Untuk mengatur ukuran gambar, kamu bisa menggunakan properti background-size. Dalam kode berikut ini, gambar akan diperbesar atau diperkecil agar bisa mengisi seluruh halaman:

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

Itulah langkah-langkah sederhana untuk membuat background image di CSS. Dengan menambahkan background image, kamu bisa membuat website lebih menarik dan unik. Selamat mencoba!