BACKGROUND GAMBAR

Dalam pembuatan website, seringkali kamu akan perlu menambahkan gambar sebagai latar belakang atau memberikan variasi latar belakang pada element tertentu. Dalam CSS, hal ini bisa dilakukan dengan cukup mudah. Dalam tutorial kali ini, kita akan membahas cara mengatur gambar latar belakang atau ‘background gambar’ di CSS.

Menggunakan Properti ‘background-image’

Cara paling sederhana untuk menetapkan gambar latar belakang pada elemen adalah dengan menggunakan properti background-image. Properti ini memungkinkan kamu untuk menentukan URL dari gambar yang akan digunakan sebagai latar belakang.

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

Dalam contoh di atas, seluruh latar belakang halaman web akan ditutupi oleh gambar yang ditunjuk oleh URL di dalam url(). Perhatikan bahwa URL harus diletakkan di dalam tanda kutip.

Mengulang Gambar Latar Belakang

Secara default, jika gambar latar belakang lebih kecil dari element, maka gambar tersebut akan diulang secara horizontal dan vertikal hingga menutupi seluruh element. Kamu bisa mengubah perilaku ini dengan properti background-repeat.

body {
  background-image: url('link_image.jpg');
  background-repeat: no-repeat;
}

Pada kode di atas, gambar latar belakang tidak akan diulang dan hanya ditampilkan sekali.

Mengatur Posisi Gambar Latar Belakang

Kamu juga dapat mengatur posisi dari gambar latar belakang dengan menggunakan properti background-position.

body {
  background-image: url('link_image.jpg');
  background-repeat: no-repeat;
  background-position: right top;
}

Dalam contoh ini, gambar latar belakang akan ditempatkan di pojok kanan atas dari elemen.

Menggunakan Shorthand Property ‘background’

Sebagai alternatif, kamu juga bisa menggunakan shorthand property background untuk mengatur semua properti latar belakang sekaligus.

body {
  background: url('link_image.jpg') no-repeat right top;
}

Dalam kode di atas, url('link_image.jpg') no-repeat right top adalah nilai dari properti background. Urutan tidak penting, namun umumnya URL gambar latar belakang ditetapkan terlebih dahulu.