HTML Background image kombinasi CSS
Home » Berita Hari Ini » Design Website » HTML Background image kombinasi CSS

HTML Background image kombinasi CSS

HTML Background Image adalah salah satu cara membuat design website dengan tampilan yang elegan, menciptakan tampilan baru pada halaman tertentu. Biasanya program design tersebut melibatkan sebuah CSS, Namun apakah bisa jika membuat background tersebut hanya dengan memanfaatkan program HTML saja? Jika kalian mengikuti blog ini, maka kamu bisa menemukan sebuah artikel yang membahas Css Background image.

Tidak hanya itu, kamu dapat mempelajari cara menentukan ukuran pada css tersebut. Cobalah pelajari terlebih dahulu sebelum melanjutkan ke panduan ini. Ternayata selain membuat background image dengan CSS, kita bisa membuatnya hanya dengan HTML saja. Menurut saya, cara ini lebih simpel dan mempercepat kinerja kita dalam hal mendesign sebuah halaman website.

tapi ada kekurangan yang harus kalian perhatikan. “biasanya loading akan semakin lambat karena tidak bisa melakukan kompres seperti pada metode css”. Alternatif terbaik jika tetap ingin menggunakan HTML untuk membuat background image adalah dengan mengecilkan ukuran gambar dengan sbuah tools compresor.

Coba pelajari praktik terbaik terkait cara mengurangi ukuran gambar dengan bantuan tools online Compressor image. Cara ini bisa kamu lakukan sebelum gambar background tersebut anda gunakan untuk halaman website kesayanganmu

Berikut ini adalah program HTML Background image yang bisa kamu gunakan untuk membuat desain pada sebuah halaman website

Kode HTML backgrond Image

<body background='url-image'>

Cara menggunakan program tersebut yaitu cukup merubah kalimat ‘url-image‘ dengan url gambar yang sudah kalian miliki. Pastikan pula kamu sudah mengoptimalkan gambar tersebut. praktik kali ini, saya menggunakan alamat gambar ‘https://miro.medium.com/max/2560/1*Od-UrquQOrcwEkpDwwkCiQ.png’ sehingga penerapan-nya adalah sebagai berikut

<body background='https://miro.medium.com/max/2560/1*Od-UrquQOrcwEkpDwwkCiQ.png'>
Ini adalalah contoh HTML Background image yang bisa kamu gunakan untuk membuat desain website<br>HTML ini masih default dan belum dikombinasikan dengan CSS sehingga berdampak pada tampilan halaman.
</body>

Apabila kamu sukses menerapkan kode HTML yang sama seperti yang saya tulis, maka hasilnya akan terlihat seperti contoh berikut.

Example Code HTML

HTML background image
Gambar : Contoh HTML Background image

Contoh dari penerapan kode HTML Background image dapat kamu lihat pada gambar tersebut. Tidak ada jarak antara teks dengan tepi halaman. Hal itu terjadi karena tidak ada kombinasi CSS yang berperan sebagai pengatur jarak. Langkah terbaik untuk menyusun halaman website supaya terlihat menarik adalah dengan menggunakan kombinasi Css. Kamu bisa memilih warna pada tulisan, membuat jarak tepi dan masih ada banyak manfaat yang bisa kamu dapatkan.

Background Enhancement with images

Kami sudah menyempurnakan HTML background image yang siap kamu gunakan untuk membuat background halaman artikel, tapi saya tidak menjamin bahwa kode ini akan bekerja baik pada sebuah template. Semua itu tergantung dari kerangka CSS dan HTML template yang sudah terpasang. Segera ambil kode HTML ini dan pastekan ke Block artikel kamu ….

<div style="background-image:url(https://miro.medium.com/max/2560/1*Od-UrquQOrcwEkpDwwkCiQ.png); 
margin:3px;padding:10px;color:#fff;">
Ini adalalah contoh HTML Background image yang bisa kamu gunakan
untuk membuat desain website<br>HTML ini masih default dan belum dikombinasikan dengan CSS sehingga berdampak pada tampilan halaman.
</div>

Berikut adalah contoh dari hasil penerapan dari kode HTML tersebut

Ini adalalah contoh HTML Background image yang bisa kamu gunakan untuk membuat desain website
HTML ini masih default dan belum dikombinasikan dengan CSS sehingga berdampak pada tampilan halaman.

Ada perbedaan antara kode HTML pertama dengan kode html yang kedua. Pada praktik no 1, Saya memakai tag Body. Tapi pada contoh ke-2 telihat sangat jelas yaitu html Tag DIV, apa itu artinya ….

Tag Body bisa kamu gunakan sebagai struktur utama pada template. Biasanya strukture HTML tersebut adalah sebagai berikut.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
  <script src="js/scripts.js"></script>
</body>
</html>

Lain halnya dengan kode HTML pada nomor 2, Kode tersebut bisa kamu gunakan untuk membuat Element tertentu. Banyak yang menempatkan HTML itu setelah tag body, sehingga contohnya menjadi seperti berikut ini.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<div style="background-image:url(https://miro.medium.com/max/2560/1*Od-UrquQOrcwEkpDwwkCiQ.png); 
margin:3px;padding:10px;color:#fff;">
Ini adalalah contoh HTML Background image yang bisa kamu gunakan
untuk membuat desain website<br>HTML ini masih default dan belum dikombinasikan dengan CSS sehingga berdampak pada tampilan halaman.
</div>
  <script src="js/scripts.js"></script>
</body>
</html>

Silahkan Copy kode HTML dan pelajari secara mandiri. Jika ada kekurangan dalam artikel ini, jangan segan untuk memberi kritik dan saran kepada Kami.

Tentang penulis : Aceng Gimbal
Sosok antusias dengan dunia Blogging untuk mengejar perubahan.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *