CARA MEMASUKAN GAMBAR DI CSS SEBAGAI BACKGROUND

Kamu pasti ingin membuat tampilan situs webmu lebih menarik dan fungsional, bukan? Salah satu caranya adalah dengan memasukan gambar sebagai background di CSS. Nah, berikut ini adalah panduan simpel tentang bagaimana caranya.

Mengenali Properti BACKGROUND-IMAGE

Pertama-tama, kita perlu mengetahui tentang properti background-image. Properti ini berguna untuk menetapkan gambar yang akan dijadikan background.

body {
  background-image: url("imageUrl");
}

Dalam contoh di atas, kamu harus mengganti “imageUrl” dengan url atau alamat gambar yang ingin dijadikan background.

Cara Memasukkan Gambar

Cara paling umum untuk melakukan ini adalah dengan memasukkan alamat URL lengkap dari gambar yang ingin digunakan sebagai background.

Menggunakan URL Lengkap

body {
  background-image: url("https://example.com/background.jpg");
}

Dalam contoh di atas, gambar yang berada di alamat ”https://example.com/background.jpg” akan diatur sebagai background.

Menggunakan Gambar dari Folder Lokal

Selain menggunakan URL, kamu juga bisa menggunakan gambar dari folder lokal di komputer kamu.

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

Pada contoh di atas, CSS mencari file gambar di dalam folder “images” yang berada di direktori yang sama dengan file CSS.

Mengatur Posisi dan Ukuran Background

Setelah memasukkan gambar sebagai background, kamu juga dapat mengatur posisi dan ukuran gambar tersebut dengan properti background-position dan background-size.

Posisi Background

body {
  background-image: url("imageUrl");
  background-position: right top;
}

Ukuran Background

body {
  background-image: url("imageUrl");
  background-size: cover;
}

Demikianlah tutorial cara memasukkan gambar di CSS sebagai background. Dengan memanfaatkan ini, diharapkan tampilan situs webmu menjadi lebih menarik dan fungsional. Selamat mencoba!