CARA MENAMBAHKAN GAMBAR DI CSS

CSS atau Cascading Style Sheet adalah bahasa stylesheet yang digunakan dalam pengembangan web untuk mendesain dan mengatur penampilan suatu halaman web. Salah satu elemen yang sering ditambahkan dalam desain web adalah gambar. Berikut ini adalah cara menambahkan gambar di CSS.

Memilih Gambar yang Akan Ditambahkan

Sebelum memulai, pertama-tama kamu perlu memilih dan menyiapkan gambar yang akan ditambahkan ke dalam halaman web kamu.

Penyimpanan Gambar

Disarankan untuk menyimpan semua gambar dalam satu folder khusus dalam direktori proyek kamu. Penyimpanan ini akan memudahkan kamu dalam proses penambahan gambar.

Menambahkan Gambar di CSS Menggunakan Properti Background-Image

Langkah paling umum untuk menambahkan gambar di CSS adalah dengan menggunakan properti background-image. Berikut adalah contoh penggunaannya:

#blok {
    background-image: url("images/namagambar.jpg");
}

Dalam contoh di atas, “namagambar.jpg” adalah nama dari gambar yang ingin ditambahkan. Jika gambar tersebut disimpan dalam folder lain, maka kamu harus menambahkan path folder tersebut sebelum nama gambar. Misalnya, jika gambar disimpan dalam folder “images”, maka penulisannya akan menjadi url("images/namagambar.jpg").

Mengatur Posisi dan Ukuran Gambar

Setelah gambar berhasil ditambahkan, kamu mungkin ingin mengatur posisi dan ukuran gambar tersebut.

Mengatur Posisi Gambar

Untuk mengatur posisi gambar, kamu bisa menggunakan properti background-position. Nilai dari properti ini adalah koordinat X dan Y gambar pada elemen. Berikut adalah contoh penggunaannya:

#blok {
    background-image: url("images/namagambar.jpg");
    background-position: 50% 50%;
}

Mengatur Ukuran Gambar

Untuk mengubah ukuran gambar, kamu bisa menggunakan properti background-size. Nilai dari properti ini bisa dalam bentuk persentase, px, em, atau kata kunci seperti ‘cover’ dan ‘contain’. Berikut adalah contohnya:

#blok {
    background-image: url("images/namagambar.jpg");
    background-size: cover;
}

Demikianlah panduan singkat tentang cara menambahkan gambar di CSS. Dengan mempraktikkan langkah-langkah ini, kamu dapat menambahkan gambar-gambar menarik ke dalam halaman web kamu dan membuat tampilan web menjadi lebih menarik. Selamat mencoba!