Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Diketahui bahwa background atau latar belakang di halaman web memiliki peranan yang cukup penting. Fungsi untuk mempercantik tampilan halaman website sehingga membuat pengguna merasa lebih nyaman. Kamu mungkin bertanya-tanya, bagaimana cara menambahkan background di HTML dengan CSS? Jangan khawatir, dalam artikel ini, kita akan membahasnya secara detail dan mudah dipahami.
Pertama-tama, kamu perlu menyiapkan file HTML. Buat file baru dan beri nama ‘index.html’ atau dengan nama lain yang kamu sukai. Di dalam file ini, kamu bisa menulis struktur dasar HTML seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menambahkan Background</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Belajar Menambahkan Background di HTML dengan CSS</h1>
</body>
</html>Perhatikan bahwa kita mencantumkan <link> ke file CSS yang akan kita gunakan untuk menambahkan background nanti.
Selanjutnya, buat file baru dan berikan nama ‘styles.css’. Di dalam file ini, kamu bisa menulis kode CSS untuk menambahkan background. Sebagai contoh, kami akan menggunakan warna harus sebagai background.
body {
background: red;
}Kode di atas berarti bahwa kita menetapkan background pada elemen ‘body’ menjadi merah.
Kamu juga bisa menambahkan gambar sebagai background dengan kode CSS. Berikut cara melakukannya:
body {
background: url("gambar.jpg");
}Pastikan kamu mengubah ‘gambar.jpg’ dengan nama dan format gambar yang kamu gunakan. Kamu juga harus memastikan gambar tersebut berada di direktori yang sama dengan file HTML dan CSS, atau mencantumkan jalur lengkapnya.
Jika kamu ingin menyesuaikan ukuran background, kamu bisa menggunakan properti background-size. Misalnya, untuk membuat gambar berukuran full screen, kamu bisa menggunakan kode berikut:
body {
background: url('gambar.jpg');
background-size: cover;
}Dengan begini, gambar akan menyesuaikan lebar dan tinggi dari browser.
Dengan mengikuti langkah-langkah di atas, kamu sudah bisa menambahkan background di HTML dengan CSS. Eksperimenlah dengan berbagai warna dan gambar untuk mendapatkan hasil yang kamu inginkan! Selesai sudah panduan ini, mudah-mudahan kamu dapat memahami dengan mudah dan bisa segera melakukannya di project kamu.
Link terkait: