cara menambahkan background di html css

Daftar Isi:

Langkah Pertama: Menyiapkan Fi...
Langkah Kedua: Membuat File CS...
Langkah Ketiga: Menambahkan Ga...

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.

Langkah Pertama: Menyiapkan File HTML

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.

Langkah Kedua: Membuat File CSS

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.

Langkah Ketiga: Menambahkan Gambar sebagai Background

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.

Menyesuaikan Ukuran Background

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.

CARA MENAMBAHKAN BACKGROUND DI HTML CSS

Langkah-langkah mudah untuk menambahkan background di HTML dengan CSS. Panduan ini cocok untuk pemula dan profesional.

Langkah Pertama: Menyiapkan File HTML

Langkah Kedua: Membuat File CSS

Langkah Ketiga: Menambahkan Gambar sebagai Background

Menyesuaikan Ukuran Background

Kelas membuat website dengan HTML dan CSS