Cara Menambahkan Background di HTML

Cara Menambahkan Background di HTML

hourhodl.com – Untuk memperindah tampilan sebuah web. beberapa orang akan menambahkan sebuah video, sebuah animasi, sampai dengan menambahkan latar belakang. Memang menambahkan sebuah background pada website akan menarik pengunjung dan membuat pengunjung percaya bahwa website tersebut selalu dikelola.

Beberapa pengguna html terkadang sangat kesulitan atau kebingungan dalam membuat atau merubah background. Dengan demikian kami akan mengulas bagaimana menambahkan background HTML. 

Cara Penambahan Background Html

Sebelum membahas cara tersebut. Kita siapkan terlebih dahulu bahan yang ingin digunakan. Sebagaimana ada background yang memang sudah disiapkan untuk digunakan. Atau kita menggunakan gambar yang lain atau kita inginkan sendiri seperti foto pribadi dan lainnya.

  1. Persiapkan berkas

Buat dan beri nama folder. Usahakan hanya satu kata.

  1. Drop file background ke folder html

Masukan gambar yang ingin digunakan kedalam folder

  1. Buka editor teks atau editor HTML

Gunakan editor teks seperti notepad atau teks edit

  1. Klik file

Pada opsi di bagian pojok atas sebelah kiri

  1. Klik save as untuk notepad atau save untuk teks edit.

Opsi ini berada pada menu file, dimana pengguna notepad menggunakan save as, sedangkan save bagi pengguna Mac 

  1. Tuliskan nama untuk dokumen html

Ketikan nama di depan (.html) jangan menghapus ekstensi dalam menamai file

  1. Mengubah ekstensi menjadi Html

Untuk notepad, mengganti ekstensi (.txt) menjadi (.html) perubahan terdapat pada bilah bawah saat melakukan penyimpanan pada kolom nama file.

Sedangkan teks edit, gulir pada menu format untuk mendapati jenis file page web (.html)

  1. Klik save

Menyimpan dokumen teks menjadi dokumen html.

Cara Menuliskan Berkas HTML

Untuk menuliskan berkas pada link tidak boleh sembarangan karena terdapat beberapa aturan. Tuliskan <Doctype html> kemudian baris berikutnya <html> 🡪 <head> 🡪 <title>page Title</Title> 🡪</head> 🡪 <body 🡪 <div style=”background-image: url ( ‘ [image url] ‘ ) ; “> 🡪 Selesaikan sisa dokumen 🡪  </body> 🡪  </html> 🡪 Simpan berkas

Cara di atas memang sedikit rumit, namun tak menutup kemungkinan Anda bisa melakukannya. Pastikan setiap komponen sudah benar agar berkas dapat dilanjutkan dengan

Menggunakan CSS

Ada cara lain lagi yaitu menggunakan CSS, langkah-langkahnya yaitu.

  1. Buat dokumen HTML
  2. Tuliskan judul dokumen<Style>
  3. Kemudian tulis body {
  4. Kemudian ketik Background-image: url(‘[image url}’)
  5. Ketik lagi dibawah baris Background-repeat: no-repeat
  6. Pada baris selanjutnya tuliskan background-size: cover:
  7. Ketik } di akhir bagian html
  8. Tekan </style> di akhir css
  9. Simpan berkas file html, klik file lalu cari opsi save agar menyimpan hasil kerja seluruh dokumen html.

Baca Juga : Cara Mendapatkan Voucher Lazada Dengan Langkah Mudah

Menambahkan background HTML memang masalah teknis yang tidak begitu mudah. Pastikan beberapa persyaratan dan ketentuan dilengkapi dengan baik agar tampilan terhadap website Anda akan lebih menarik.

Leave a Reply

Your email address will not be published. Required fields are marked *