Background-image Html

MUAZHAN

4 min read

·

Jun 28, 2024

21

Share

Background Image dalam HTML

Background image adalah elemen penting dalam desain website yang dapat mempercantik tampilan halaman web. Dalam HTML, kita dapat menggunakan properti background-image untuk menerapkan gambar sebagai latar belakang elemen HTML.

Cara Menerapkan Background Image

Properti background-image dapat diterapkan pada berbagai elemen HTML, seperti body, div, header, footer, dan lainnya. Berikut adalah cara menerapkannya:

1. Gunakan CSS inline:

   
       Konten di dalam div
   
   

2. Gunakan CSS internal:

   
   
       Konten di dalam div
   
   

3. Gunakan CSS eksternal:

   
   
       Konten di dalam div
   
   

   File styles.css:

   div {
       background-image: url('path/to/image.jpg');
   }
   

Atribut Background Image

Selain url(), properti background-image juga memiliki beberapa atribut tambahan, seperti:

• background-repeat: Menentukan bagaimana gambar diulang pada latar belakang.
  • repeat: Mengulang gambar secara horizontal dan vertikal.
  • repeat-x: Mengulang gambar secara horizontal.
  • repeat-y: Mengulang gambar secara vertikal.
  • no-repeat: Tidak mengulang gambar.
• background-position: Menentukan posisi gambar pada latar belakang.
  • left top: Menempatkan gambar di pojok kiri atas.
  • center center: Menempatkan gambar di tengah.
  • right bottom: Menempatkan gambar di pojok kanan bawah.
  • Nilai numerik: Misalnya 20px 50px untuk menjauhkan gambar 20px dari sisi kiri dan 50px dari sisi atas.
• background-size: Menentukan ukuran gambar pada latar belakang.
  • cover: Menutupi seluruh area latar belakang dengan gambar, meskipun gambarnya tidak sesuai ukuran.
  • contain: Mengatur ukuran gambar agar seluruh gambar dapat terlihat dan mengisi area latar belakang, meskipun tidak menutupi seluruh area.
  • Nilai numerik: Misalnya 100px 200px untuk mengatur ukuran gambar menjadi 100px x 200px.

Contoh Penerapan Background Image

Berikut adalah contoh penggunaan berbagai atribut background-image:

Selamat Datang
Ini adalah contoh penggunaan background image dalam HTML.

Kode di atas akan menampilkan halaman web dengan gambar background.jpg sebagai latar belakang. Gambar tersebut tidak diulang, tetap di posisi tengah, menutupi seluruh area layar, dan tidak ikut bergeser saat halaman digulirkan.

Kesimpulan

Background-image merupakan fitur penting dalam HTML untuk mempercantik desain website. Dengan memahami cara penerapan dan atribut-atributnya, Anda dapat membuat tampilan web yang lebih menarik dan profesional.