Diskon! Diskon! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MENAMBAHKAN GAMBAR DI CSS

Panduan singkat tentang bagaimana menambahkan gambar dalam CSS. Artikel ini akan membantu kamu memahami langkah-langkahnya secara mudah dan jelas.

Daftar Isi:

Memilih Gambar yang Akan Ditam...
Menambahkan Gambar di CSS Meng...
Mengatur Posisi dan Ukuran Gam...

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!


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding