Cara Memberi Background di HTML

Posted on

HTML atau Hypertext Markup Language merupakan bahasa pemrograman yang digunakan untuk membuat halaman web. Salah satu elemen penting dalam pembuatan halaman web adalah tampilan atau desain halaman tersebut. Salah satu cara untuk membuat tampilan halaman web menjadi lebih menarik adalah dengan memberikan background atau latar belakang pada halaman tersebut. Berikut adalah cara memberi background di HTML.

1. Menggunakan Background Color

Cara yang paling sederhana untuk memberi background pada halaman web adalah dengan menggunakan background color. Caranya adalah dengan menambahkan atribut style pada tag body seperti berikut:

<body style="background-color: #ffffff;">

Pada contoh di atas, background color yang digunakan adalah putih (#ffffff). Kamu dapat mengganti nilai ini dengan kode warna lain yang kamu inginkan.

2. Menggunakan Background Image

Selain menggunakan background color, kamu juga dapat memberikan background pada halaman web dengan menggunakan background image atau gambar latar belakang. Caranya adalah dengan menambahkan atribut style pada tag body dan menambahkan CSS background-image seperti berikut:

<body style="background-image: url('nama_file_gambar.jpg');">

Pada contoh di atas, kita menggunakan gambar dengan nama file “nama_file_gambar.jpg. Kamu dapat mengganti nama file dan path sesuai dengan letak file gambar pada server kamu.

Pos Terkait:  Cara Top Up Gopay Lewat Shopeepay: Mudahnya Isi Saldo Gopay dengan Shopeepay

3. Mengatur Ukuran Background Image

Jika kamu ingin mengatur ukuran gambar latar belakang, kamu dapat menambahkan atribut CSS background-size pada tag body seperti berikut:

<body style="background-image: url('nama_file_gambar.jpg'); background-size: cover;">

Pada contoh di atas, kita menggunakan nilai “cover” pada background-size untuk membuat gambar latar belakang menutupi seluruh halaman web. Kamu juga dapat menggunakan nilai lain seperti “contain” atau “auto.

4. Mengatur Posisi Background Image

Selain mengatur ukuran gambar latar belakang, kamu juga dapat mengatur posisi gambar tersebut pada halaman web. Caranya adalah dengan menambahkan atribut CSS background-position pada tag body seperti berikut:

<body style="background-image: url('nama_file_gambar.jpg'); background-size: cover; background-position: center center;">

Pada contoh di atas, kita menggunakan nilai “center center” pada background-position untuk menempatkan gambar latar belakang di tengah-tengah halaman web. Kamu juga dapat menggunakan nilai lain seperti “top left”, “bottom right”, dan sebagainya.

5. Menggabungkan Background Color dan Image

Terakhir, kamu juga dapat menggabungkan penggunaan background color dan image pada halaman web. Caranya adalah dengan menambahkan atribut CSS background pada tag body seperti berikut:

<body style="background: #ffffff url('nama_file_gambar.jpg') center center no-repeat; background-size: cover;">

Pada contoh di atas, kita menggunakan nilai “no-repeat” pada background untuk menghindari pengulangan gambar latar belakang. Kamu juga dapat mengganti nilai ini dengan “repeat-x” atau “repeat-y” jika ingin menampilkan gambar latar belakang secara horizontal atau vertikal.

Pos Terkait:  Perbedaan VCD dan DVD

Kesimpulan

Memberikan background pada halaman web merupakan salah satu cara untuk membuat tampilan halaman tersebut lebih menarik. Kamu dapat memberikan background pada halaman web dengan menggunakan background color atau image. Selain itu, kamu juga dapat mengatur ukuran dan posisi gambar latar belakang sesuai dengan keinginan. Jangan lupa untuk menggabungkan penggunaan background color dan image jika diperlukan.

Leave a Reply

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