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
- Menggunakan atribut Latar Belakang [Tag Html]
- 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
Uji SekarangOutput 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["//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