Apa tag gambar latar belakang di html?

Question

Saat membuat kode situs web, menggunakan gambar sebagai gambar latar belakang situs web berbeda dengan menyisipkan gambar dalam HTML menggunakan elemen img

Table of Contents Show

Bagaimana jika Gambar Latar Belakang Lebih Kecil Dari Jendela Peramban?
1. Using the background-image attribute inside the tag
2. Menggunakan atribut gaya HTML
Apa tag untuk gambar latar belakang dalam HTML?
Bagaimana cara menutupi latar belakang gambar dalam HTML?
Apa elemen HTML untuk latar belakang?

Untuk menggunakan gambar sebagai latar belakang situs web Anda, Anda akan menggunakan CSS

Ini sebuah contoh

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Background Image</title>
</head>

<body>
    <h1>Background image</h1>
</body>
</html>

h1{
    text-align: center;
}

Kami memiliki dua blok kode di atas — kode HTML menampilkan teks bertuliskan "Gambar latar belakang" di halaman web sementara kode CSS memusatkan teks di halaman

Untuk menambahkan gambar wallpaper ke situs web — yang menutupi seluruh halaman — Anda harus menulis beberapa aturan CSS untuk elemen body. Begini caranya

body{
    background-image: url('bg-image.jpg');
}

Pada kode di atas, kami menggunakan properti background-image untuk menambahkan gambar ke badan halaman web. Jalur/lokasi gambar diteruskan sebagai parameter ke fungsi url().

h1{
    text-align: center;
}

_0

Inilah tampilan halaman web sekarang

Bagaimana jika Gambar Latar Belakang Lebih Kecil Dari Jendela Peramban?

Dalam situasi di mana gambar lebih kecil dari browser, gambar diulangi beberapa kali untuk menutupi ruang yang tersisa

Pengulangan ini tidak terlihat bagus untuk setiap gambar. Inilah tampilan versi lebih kecil dari gambar yang digunakan di bagian sebelumnya di browser

Gambar telah dibagi menjadi empat bagian yang tidak rata. Kecuali jika ini adalah efek yang Anda cari, Anda dapat memperbaikinya menggunakan properti

h1{
    text-align: center;
}

1

Berikut cara memperbaiki masalah pengulangan gambar

body{
    background-image: url('bg-image-small.jpg');
    background-repeat: no-repeat;
}

Dalam kode di atas, kami menetapkan nilai

h1{
    text-align: center;
}

_2 ke properti

h1{
    text-align: center;
}

1

Inilah tampilan halaman web sekarang

Gambar tidak lagi ditampilkan di seluruh halaman, tetapi kami memiliki masalah baru — gambar tidak lagi menutupi seluruh halaman.

Untuk memperbaikinya, kami menggunakan properti

h1{
    text-align: center;
}

_4 dan

h1{
    text-align: center;
}

5

body{
    background-image: url('bg-image-small.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Menyetel nilai properti

h1{
    text-align: center;
}

4 menjadi

h1{
    text-align: center;
}

7 membuat gambar menutupi seluruh elemen (body/seluruh halaman dalam kasus kita)

Dengan nilai

h1{
    text-align: center;
}

_9 dari properti

h1{
    text-align: center;
}

5, posisi gambar tetap. Dengan cara ini tetap di posisi yang sama bahkan ketika Anda menggulir halaman

Inilah gambarnya sekarang

Kelemahan dari merentangkan gambar kecil untuk menutupi seluruh halaman adalah gambar kehilangan kualitas dan menjadi buram saat direntangkan. Dalam hal ini, Anda harus mempertimbangkannya sebelum menggunakan gambar kecil sebagai gambar latar belakang situs web Anda

Ringkasan

Pada artikel ini, kami berbicara tentang menambahkan gambar wallpaper ke situs web

Anda dapat menambahkan gambar latar belakang ke situs web Anda menggunakan properti CSS background-image

Kita juga belajar cara menggunakan properti latar belakang CSS lainnya seperti

h1{
    text-align: center;
}

1,

h1{
    text-align: center;
}

4, dan

h1{
    text-align: center;
}

5

Selamat mengkode

Ihechikara Vincent Abba

Biografi penulis ini dapat ditemukan di artikelnya

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

halaman web menggunakan bahasa markup. Ini adalah kombinasi dari Hypertext dan bahasa Markup. Di sini, hypertext mendefinisikan tautan antara halaman web sedangkan bahasa markup digunakan untuk menentukan dokumen teks di dalam tag yang menentukan struktur halaman web. Dalam HTML, kita dapat membuat halaman web kita terlihat lebih menarik dan menawan dengan menambahkan gambar latar belakang ke halaman HTML kita. Jadi, kita bisa menambahkan gambar background dengan dua cara berbeda.

Add a background image using the background image attribute inside the tag.
Tambahkan gambar latar belakang menggunakan atribut gaya HTML

Pada artikel ini, kita akan mempelajari dua metode untuk menambahkan gambar latar belakang ke halaman web

1. Using the background-image attribute inside the tag

In this method we will add a background image is using the background image attribute inside the tag.

Sintaksis

Contoh

HTML

<!DOCTYPE html>

<html lang="en">

<head>

________25______0<<2<3<2>

<6head>

<html0 html1=html3 >

________25______0<html7html8html7>

<6html0>

<6html>

Keluaran

2. Menggunakan atribut gaya HTML

Dalam metode ini, kami akan menambahkan gambar latar belakang menggunakan atribut gaya HTML untuk elemen tertentu di halaman web

Sintaksis

Contoh

HTML

<!DOCTYPE html>

<html lang="en">

<head>

________25______0<<2<3<2>

<6head>

<html0>

________25______0<html7html8html7>

________25______0<>7 >8=<0>

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<_2

<<4<5<4>

<_8

<0<6>7>

<6html0>

<6html>

Pada contoh di atas kita dapat melihat bahwa tidak ada gambar latar belakang untuk judul "Welcome to GeeksforGeeks", tetapi kita memiliki gambar latar belakang untuk div yang berisi paragraf

Apa tag untuk gambar latar belakang dalam HTML?

Atribut HTML background digunakan untuk menentukan gambar latar belakang dokumen.

Bagaimana cara menutupi latar belakang gambar dalam HTML?

Isi Seluruh Area Pandang dengan Properti ukuran latar belakang . Dengan menggunakan nilai ini, browser akan secara otomatis dan proporsional menskalakan lebar dan tinggi gambar latar belakang sehingga keduanya sama atau lebih besar dari lebar dan tinggi area pandang.

Apa elemen HTML untuk latar belakang?

Atribut yang digunakan untuk mengatur warna latar belakang elemen HTML adalah bg color . Bergantung pada elemen yang warna latar belakangnya akan disetel, kami menggunakan tag yang sesuai. Atribut bgcolor dapat digunakan dengan tag berikut- body, table, td, th, tr, marquee.

kode html