Mengapa saya tidak bisa menambahkan gambar latar belakang di html?

Dalam HTML, kita dapat dengan mudah menambahkan Gambar latar belakang dalam dokumen Html yang akan ditampilkan di halaman web menggunakan dua metode berbeda berikut ini

1. Menggunakan atribut Latar Belakang (Tag Html)
2. Menggunakan Lembar Gaya Internal

Menggunakan atribut Background

Catatan. HTML 5 tidak mendukung atribut background dari tag, jadi kita harus menggunakan opsi CSS internal untuk menambahkan background di dokumen Html

Jika kita ingin menambahkan gambar background pada dokumen Html menggunakan atribut Background maka kita harus mengikuti langkah-langkah yang diberikan di bawah ini. Dengan menggunakan langkah-langkah ini, kita dapat dengan mudah melihat gambar di halaman web

Langkah 1. Pertama, kita harus mengetikkan kode Html di editor teks apa pun atau membuka file Html yang ada di editor teks tempat kita ingin menggunakan atribut latar belakang

Langkah 2. Sekarang, gerakkan kursor di dalam tag awal di dokumen Html kita. Dan, kemudian ketikkan atribut latar belakang seperti yang ditunjukkan pada blok berikut

Langkah 3. Setelah itu, kita harus memberikan path dari gambar yang ingin kita tambahkan. Jadi, ketik jalur gambar di atribut latar belakang. Jika gambar kami disimpan di direktori yang sama di mana file HTML disimpan, ketik jalur berikut

Jika gambar kita disimpan di direktori lain maka ketikkan jalur yang benar dari gambar itu, sehingga browser dapat membaca gambar dengan mudah seperti yang dijelaskan di blok berikut

Jika gambar kita ada di internet maka kita juga bisa menambahkan gambar tersebut dengan menggunakan URL, seperti yang diberikan pada blok berikut

Langkah 4. Terakhir, kita harus menyimpan file Html atau Kode Html di editor teks

Output dari kode di atas ditunjukkan pada tangkapan layar berikut

Menggunakan Lembar Gaya Internal

Jika kita ingin menambahkan gambar background pada dokumen Html menggunakan Internal CSS maka kita harus mengikuti langkah-langkah yang diberikan di bawah ini. Dengan menggunakan langkah-langkah ini, kita dapat dengan mudah melihat gambar di halaman web

Langkah 1. Pertama, kita harus mengetikkan kode Html di editor teks apa pun atau membuka file Html yang ada di editor teks di mana kita ingin menggunakan opsi Internal CSS untuk menambahkan gambar latar belakang

Langkah 2. Sekarang, kita harus menempatkan kursor di tag head, tepat setelah penutupan tag judul di dokumen Html dan kemudian menentukan tag awal dan penutup dari

Agar dapat mengedit gambar, itu harus menjadi bagian dari sumber HTML dari posisi yang Anda edit. Meskipun ini masuk akal, itu tidak selalu jelas. Misalnya, dengan bantuan CSS (Cascading Style Sheet), gambar dapat ditampilkan di tempat di mana sumber HTML sebenarnya tidak berisi gambar sama sekali

Anda dapat mengedit sumber HTML posisi untuk melihat apakah ada tipuan CSS yang terjadi menggunakan editor HTML

Misalnya, jika HTML terlihat seperti ini

  

    

  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  

dan Anda hanya bisa mengedit teks, lalu ternyata kelas ajaib "background-image" membuat gambar muncul di belakang teks

Pada contoh di atas, jika Anda ingin mengubah gambar sebenarnya, ubah atribut "src" dari tag "img" menjadi URL gambar lain. Pastikan URL gambar dapat diakses publik, dengan kata lain, gambar harus diunggah ke situs web publik

Terkadang sumber HTML bahkan tidak memiliki tag "img" sama sekali

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Dalam hal ini gambar dikirimkan melalui kelas CSS "background-image" dan URL untuk gambar tersebut adalah bagian dari style sheet itu sendiri. BlueConic tidak dapat mengedit style sheet itu sendiri, jadi dalam hal ini tidak ada cara untuk mengedit gambar

Masalahnya, div tidak memiliki dimensi. Saya melihat bahwa Anda menggunakan Bootstrap, Anda bisa menambahkan wadah kelas ke solusi1 => Anda

``

Atau jika Anda ingin lebar halaman penuh

Info lebih lanjut tentang container dan container-fluid. Klik saya

Tanpa Bootstrap Anda dapat menentukan lebar dan tinggi Anda sendiri misalnya

.solution1 {
    background: url("https://scontent-frx5-1.xx.fbcdn.net/v/t1.0- 
    0/q92/p526x296/26230297_160544681336798_1685384360638587870_n.jpg? 
    oh=b65e28b26251f2ff876e3caa5bcea755&oe=5B3ACC0D");
    background-size: cover;
    height: 600px;
    width: 50%;
    margin: auto;
}

Anda dapat melihat parameter tinggi dan lebar
Ubah Tinggi sesuai keinginan Anda, Anda dapat mengubah lebar menjadi 100% (mencakup seluruh situs web),
margin: auto; ada di tengah gambar
Anda juga dapat menambahkan background-repeat: no-repeat; more info =>background-repeat

Bagaimana Anda menempatkan gambar latar belakang dalam HTML?

Mengapa saya tidak dapat menambahkan gambar di CSS?

Mengapa gambar latar belakang tidak muncul di Div?