cara membuat background image di html

Membuat laman web menjadi lebih menarik bisa dilakukan dengan banyak cara, salah satunya adalah menambahkan gambar latar atau background image. Dalam artikel ini, kita akan membahas bagaimana cara membuat background image dalam HTML. Sebelum kita memulai, pastikan kamu sudah memahami dasar-dasar HTML dan CSS.

Tahap Persiapan

Sebelum kita membuat background image di HTML, ada beberapa hal yang perlu kamu siapkan, diantaranya:

Software Text Editor

Pertama, kamu akan membutuhkan software text editor untuk menulis kode HTML dan CSS. Beberapa contoh software yang bisa kamu gunakan adalah Sublime Text, Notepad++, atau Visual Studio Code.

Gambar yang ingin dijadikan Background

Kedua, tentukan gambar yang ingin kamu jadikan latar belakang. Pilihlah gambar dengan resolusi yang cukup agar tampilan laman webmu tetap bagus di berbagai ukuran layar. Simpan gambar tersebut dalam satu folder dengan file HTML yang kamu kerjakan.

Memulai Penulisan Kode

Setelah semua perlengkapan siap, sekarang kita dapat memulai untuk menulis kode.

Menulis Kode HTML

Buatlah file baru pada text editor kamu dan simpanlah dengan ekstensi .html. Pada file ini, kamu akan membuat struktur dasar HTML seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Selamat datang di laman web saya!</h1>
</body>
</html>

Kode di atas merupakan kode dasar HTML. Fungsi link di dalam head digunakan untuk menghubungkan file HTML dengan file CSS yang akan kita tulis selanjutnya.

Menulis Kode CSS

Selanjutnya, buat file baru dan simpan dengan ekstensi .css. Pada file ini kita akan menulis kode untuk menambahkan gambar latar belakang. Contoh kode yang bisa kamu gunakan adalah:

body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}

Jelaskan setiap kode di atas berarti:

background-image: url('background.jpg'); berfungsi untuk memanggil gambar yang akan dijadikan latar belakang. Gantilah ‘background.jpg’ dengan nama dan ekstensi file gambar kamu.
background-repeat: no-repeat; berarti gambar latar belakang tidak akan berulang.
background-attachment: fixed; membuat gambar latar belakang tetap pada posisi semula meski pengguna scroll laman web.
background-size: cover; berarti gambar latar belakang akan menutupi seluruh area elemen.

Setelah menulis kode di atas, simpan file CSS dan buka file HTML di peramban web. Jika semua sudah benar, kamu seharusnya sudah bisa melihat gambar latar belakang pada laman webmu.

Demikianlah cara membuat background image di HTML. Ingatlah untuk selalu latihan dan eksperimen dengan kode-kode yang sudah kamu pelajari. Selamat mencoba!

CARA MEMBUAT BACKGROUND IMAGE DI HTML

Ikuti panduan langkah demi langkah ini untuk memahami cara membuat background image di HTML. Cocok untuk pemula yang sedang belajar kode HTML dan CSS.