Body Style Html Background-image

MUAZHAN

4 min read

·

Jul 03, 2024

32

Share

Menambahkan Gambar Latar Belakang pada Elemen HTML dengan background-image

background-image adalah properti CSS yang memungkinkan Anda menambahkan gambar latar belakang pada elemen HTML. Gambar latar belakang dapat berupa gambar statis atau gambar yang bergerak (animasi). Pada artikel ini, kita akan membahas cara menggunakan background-image untuk menambahkan gambar latar belakang pada elemen HTML.

Cara Menggunakan background-image

Anda dapat menggunakan properti background-image dalam CSS untuk menentukan gambar latar belakang untuk elemen HTML. Berikut adalah sintaks dasar:

element {
  background-image: url("path/to/image.jpg");
}

Keterangan:

• element: Elemen HTML yang ingin Anda tambahkan gambar latar belakang.
• url("path/to/image.jpg"): URL gambar yang ingin Anda gunakan sebagai latar belakang.

Contoh Penggunaan

Misalnya, untuk menambahkan gambar latar belakang pada elemen body, Anda dapat menggunakan kode CSS berikut:

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

Kode di atas akan menambahkan gambar background.jpg yang terletak di folder images sebagai gambar latar belakang pada seluruh halaman web.

Menyesuaikan Gambar Latar Belakang

Anda dapat menyesuaikan gambar latar belakang menggunakan berbagai properti CSS, seperti:

• background-repeat: Mengatur cara gambar latar belakang diulang. Nilai yang umum digunakan adalah repeat, no-repeat, repeat-x, dan repeat-y.
• background-position: Mengatur posisi gambar latar belakang. Nilai yang umum digunakan adalah left, center, right, top, bottom, dan 50% 50%.
• background-size: Mengatur ukuran gambar latar belakang. Nilai yang umum digunakan adalah cover, contain, dan 100% 100%.
• background-attachment: Mengatur apakah gambar latar belakang tetap diam atau bergerak bersama konten. Nilai yang umum digunakan adalah scroll dan fixed.

Contoh Penyesuaian Gambar Latar Belakang

Berikut adalah contoh kode CSS untuk menyesuaikan gambar latar belakang:

body {
  background-image: url("images/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

Kode di atas akan:

• Menambahkan gambar background.jpg sebagai gambar latar belakang.
• Mencegah gambar latar belakang dari pengulangan.
• Memposisikan gambar latar belakang di tengah halaman.
• Mengatur ukuran gambar latar belakang agar memenuhi seluruh area tampilan.
• Membuat gambar latar belakang tetap diam saat pengguna menggulir halaman.

Kesimpulan

background-image adalah properti CSS yang kuat yang memungkinkan Anda menambahkan gambar latar belakang pada elemen HTML. Dengan menggunakan properti ini dan berbagai penyesuaiannya, Anda dapat membuat tampilan web yang lebih menarik dan profesional.