Membuat Background Image html (Pemula) 

Penulis: Alhasbi

Tahukah Anda, membuat background image atau gambar latar pada website melalui html cukup mudah loh. Script html merupakan hal penting karena html berfungsi untuk mengatur tampilan sebuah website. Oleh karena itu, Anda perlu mempelajari html dengan baik jika ingin membuat desain web sendiri.

Salah satu hal penting dalam suatu website adalah tampilan latar atau background website. Tidak jarang orang-orang membuat background image mereka menjadi lebih menarik supaya banyak pengunjung yang tertarik.

Nah, pada kali ini Hidup Digital akan memberikan tutorial atau cara membuat background image melalui html dengan mudah, untuk pemula.

Membuat background image di html

Perlu Anda pahami, ada beberapa cara untuk membuat gambar latar melalui html, mulai dari CSS hingga membuat script langsung.

Ketika menggunakan CSS, Anda membutuhkan properti CSS yaitu background-image, di mana di dalamnya mempunyai value url(nama_file_gambar.format). Maksudnya, di dalam url tersebut terdapat link atau url dari gambar yang Anda gunakan lengkap dengan nama file serta format file.

Misalkan, Anda ingin menggunakan gambar dengan nama file latarutama1.png sebagai background image. Ketika file tersebut berada dalam satu folder dengan script html, Anda bisa mengisi nilainya menjadi url(“latarutama1.png”). Akan tetapi, jika file berada di folder lain (misalkan folder image_props) maka Anda bisa mengubah nilai url menjadi url(“image_props/latarutama1.png”).

Berikut ini adalah cara detail membuat background image melalui html.

Cara 1, langsung memasukkannya ke html

Ini merupakan cara cepat dan mudah yaitu dengan memasukkan script langsung ke dalam tag head dengan label tag style juga. Adapun Anda perlu memasukkan script berikut.

body {

background-image : url("latarutama1.png"), url ("latarutama2.png");

background-color : #cccccc;

}

Anda bisa mengubah nilai url sesuai dengan file gambar yang ingin Anda gunakan.

Setelah itu, Anda bisa menerapkan script dengan klik tab menu Run kemudian pilih Launch in Chrome.

Cara 2, memasukkan tag ke html 

Adapun cara ini sebenarnya hampir sama dengan cara 1. Anda hanya perlu memasukkan tag yang dibutuhkan pada script html untuk menampilkan gambar latar. Anda bisa menyalin (copy) script di bawah ini dalam tag style.

body {

background-image : url ("latarutama1.jpg");

background-color : #cccccc;

}

Baca Juga : Cara Mudah (Online) Mengubah Resolusi Video

Cara 3, menggunakan CSS

Sebagaimana penjelasan di awal, menggunakan CSS berarti Anda harus menggunakan properti type dengan text/css seperti pada gambar berikut.

<style type = "text/css">

#main {

background-image : url ('latarutama4.jpg');

height : 600px;

width : 800px;

}

</style>

Cara 4, background dalam tagl body

Perlu Anda ketahui, Anda bisa membuat gambar latar melalui html dalam tag body. Anda bisa menyalin script berikut.

body background = "latarutama5.jpg">

Cara 5, mengatur dengan beberapa atribut

Anda juga bisa membuat gambar latar dan mengaturnya secara langsung menggunakan beberapa atribut html. Anda bisa menyalin script html berikut ini.

<style> 

body{ 

background-image:url(latarutama6.jpg); 

background-size:cover; 

background-attachment: fixed; } 

p{ color:white; } 

</style>

Baca Juga : Mengatasi Masalah This App Can’t Run on Your PC

Selamat mencoba

Cara membuat background image menggunakan html cukup mudah kan?

Selamat mencoba!

Sumber