Body Background Code Html

MUAZHAN

5 min read

·

Jul 04, 2024

25

Share

Cara Mengatur Background Body di HTML

Pada halaman web, background body adalah area yang terlihat di belakang semua konten. Anda dapat mengubah background body dengan berbagai cara, seperti menambahkan warna, gambar, atau gradient. Berikut adalah beberapa metode yang dapat Anda gunakan:

1. Mengatur Warna Background

Anda dapat mengatur warna background body dengan menggunakan properti background-color dalam CSS. Berikut contohnya:

  
  


  
Ini adalah judul
  
Ini adalah paragraf teks.

Anda dapat menggunakan nama warna seperti "red", "blue", "green", atau kode heksadesimal seperti "#f0f0f0".

2. Menambahkan Gambar Background

Untuk menambahkan gambar background, gunakan properti background-image dalam CSS. Berikut contohnya:

  
  


  
Ini adalah judul
  
Ini adalah paragraf teks.

Pastikan gambar berada dalam folder yang sama dengan file HTML Anda atau Anda harus menyertakan path lengkap ke gambar.

3. Menambahkan Gradient Background

Anda dapat menambahkan gradient background dengan menggunakan properti background-image dan menetapkan nilai gradient sebagai background. Berikut contohnya:

  
  


  
Ini adalah judul
  
Ini adalah paragraf teks.

Anda dapat menyesuaikan arah gradient dengan menggunakan keyword "to top", "to bottom", "to left", "to right" atau dengan menggunakan sudut dalam derajat.

4. Mengatur Ulang Background

Untuk mengatur ulang background body ke pengaturan default, Anda dapat menggunakan properti background dengan nilai "none" dalam CSS. Berikut contohnya:

  
  


  
Ini adalah judul
  
Ini adalah paragraf teks.

5. Menambahkan Background di Div

Anda juga dapat menambahkan background ke element HTML lainnya, seperti <div>. Caranya sama dengan menambahkan background ke body, hanya saja Anda harus menargetkan element <div> dalam CSS. Berikut contohnya:

  
  


  

    
Ini adalah judul
    
Ini adalah paragraf teks.
  

Tips tambahan:

• Gunakan CSS untuk mengontrol pengaturan background body.
• Anda dapat menggunakan properti background-repeat untuk mengontrol bagaimana gambar background diulangi.
• Anda dapat menggunakan properti background-position untuk mengontrol posisi gambar background.
• Anda dapat menggunakan properti background-size untuk mengontrol ukuran gambar background.

Dengan menguasai teknik ini, Anda dapat menyesuaikan tampilan website Anda dengan mudah dan membuat website yang lebih menarik.