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
<div> <div class="background-image"> <img src="/images/background.jpg" /> </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div>
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
<div class="background-image">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>_
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
Namun, masalah ini belum tentu karena kesalahan pengkodean. Meskipun kode Anda benar, banyak faktor lain yang dapat mencegah gambar latar situs web muncul di halaman. Berikut adalah beberapa cara untuk memperbaiki masalah gambar latar tidak berfungsi
Isi
Pastikan File CSS Anda Tertanam dengan Benar di File HTML Anda
File CSS harus ditautkan ke file HTML agar gambar latar ditampilkan atau dimuat dengan benar di situs web. Selain itu, Anda harus menyertakan tag tautan di file HTML untuk memperbaiki masalah seperti URL gambar latar tidak berfungsi. Tag link harus selalu seperti ini di dalam tag .
Jika file CSS tidak ditautkan dengan benar ke file HTML, latar belakang akan menjadi putih dan tidak menunjukkan gaya atau warna apa pun segera setelah situs web dimuat. Untuk mendiagnosis kesalahan ini, Anda dapat memeriksa dengan elemen inspektur dengan mengklik kanan halaman alat inspektur browser Anda. Jika Anda melihat 404 tidak ditemukan atau kesalahan sumber daya karena ketidakcocokan jenis MIME, itu berarti file CSS Anda tidak dimuat dengan benar
Jika Anda menghadapi jenis kesalahan seperti itu, periksa tag terlebih dahulu. Pastikan atribut href memuat file yang sama dengan file CSS yang sebenarnya. Juga, pastikan jalur file benar dan relatif terhadap file HTML. Jika file HTML dan CSS berada di direktori yang sama, Anda dapat mengatur href sebagai gaya. css. Garis miring ke depan biasanya diletakkan sebelum jalur. Seperti href = “/style. css”.
Ini akan mengonfirmasi bahwa jalur akan dimulai dari akar situs web. Jika halaman Anda berada di subfolder yang berbeda dan Anda ingin memuat semuanya dengan kode , maka Anda harus berhati-hati untuk mengedepankan garis miring . Selanjutnya, jika gambar latar CSS tidak dimuat, coba kode ini untuk mengatasi masalah tersebut.
tubuh{css-gambar. url('http. // www. Latar Belakang. com/pw-content/images/folder/background. jpg’);padding-kanan. 20em;
padding-kiri. 11em;
Kali, serif;
font-family. Kurir Baru, "Konsol Lucida";
warna. biru;}
Setel Jalur Gambar dengan Benar ke URL Gambar Latar Belakang
Jika gambar latar CSS tidak berfungsi, maka ada beberapa alasan untuk ini. Sering terjadi bahwa Anda tidak menyetel jalur gambar latar dengan benar, sehingga gambar latar situs web Anda tidak berfungsi dengan CSS
Jika Anda menentukan gambar latar belakang situs web Anda di badan lembar gaya CSS dan latar belakang situs web Anda tetap berwarna putih, maka alih-alih hanya mengetikkan nama gambar di badan seperti body {background. url('background_image. jpeg’);}. Anda harus mengunggah jalur lengkap dari gambar latar belakang seperti ini
tubuh{latar belakang. url('http. // www. gambar latar belakang. com/pw-content/uploads/home/background_image. jpeg);}
Ini akan menyelesaikan masalah gambar latar CSS tidak berfungsi
Gunakan Sintaks Akurat di Properti Gambar Latar Belakang CSS
Penting untuk menggunakan sintaks yang benar untuk mengatur gambar latar dengan sempurna. Bahkan kesalahan kecil dalam sintaks Anda dapat menyebabkan masalah dengan tampilan gambar latar belakang. Ini adalah sintaks yang paling umum digunakan dengan background-image
- gambar latar belakang. url(“gambar/gambar_latar belakang. jpg”);
- warna latar belakang. #000002;
- background-repeat. tidak ada pengulangan;
- background-position. tengah;
- background-size. menutupi;
- background-size. 10px 20p;
- gambar latar belakang. gradien linier (putih, hitam);
Alih-alih menyetel properti ini secara terpisah, Anda dapat menggunakan fitur steno. Dengan fitur ini, Anda menggabungkan semua nilai yang berbeda menjadi satu gaya, seperti
Latar Belakang. no-repeat. #center/cover url(“/images/background_image. jpg”) #0000;
Saat menggunakan fitur steno, sintaks harus sempurna. Tidak masalah jika Anda mengatur fitur latar belakang dalam urutan yang berbeda. Anda dapat menyesuaikan fitur. Namun, mengubah ukuran latar belakang bisa menjadi tugas yang menakutkan
Fitur ukuran latar belakang hanya digunakan jika tepat mengikuti fitur posisi latar belakang dengan garis miring {/}. Misalnya, ada fitur tengah atau sampul, di mana sampul menunjukkan ukuran latar belakang dan bagian tengah menunjukkan posisi latar belakang.
Anda dapat menggunakan fitur background-position secara terpisah. Namun, jika Anda hanya menggunakan fitur sampul dan tidak menggunakan fitur posisi latar belakang, file CSS akan membuat kesalahan. Karena kesalahan menghasilkan kode yang tidak valid juga akan muncul di fitur latar belakang lainnya
Secara Eksplisit Mengatur Tinggi dan Lebar Gambar Latar Belakang
Jika Anda tidak mendapatkan error 404, tetapi gambar latar belakang tidak muncul, maka Anda harus memeriksa seluruh elemen di inspektur kode. Jika tidak ada konten HTML dalam elemen, tinggi atau lebarnya nol, atau keduanya disetel ke nol, artinya gambar latar situs web Anda secara teknis dimuat dengan benar tetapi disembunyikan karena elemennya 0px
Tinggi 0px berarti elemen tidak akan terlihat seperti background-image dll. Untuk memperbaiki jenis masalah ini, Anda mengatur tinggi elemen gambar menjadi 120px dan lebar 300px. Anda dapat mengatur min-height menjadi 125px jika Anda ingin menampilkan konten teks beserta gambarnya
Bagaimana cara mengatur lebar dan tinggi gambar latar belakang?
Contoh 1. Set otomatis
{Latar Belakang. url(background_image. jpg);
background-size. mobil;
background-repeat. tidak ada pengulangan;
}
Contoh 2. Atur secara manual
{Latar Belakang. url(background_image. jpg);
background-size. 300px 120px;
background-repeat. tidak ada pengulangan;
}
Perbaiki Gambar Latar Belakang CSS Tidak Berfungsi Dengan Properti Lampiran Latar Belakang
Fitur background-attachment digunakan untuk menggulir atau memperbaiki gambar latar belakang di CSS karena gulir adalah nilai defaultnya. Properti ini memiliki nilai-nilai berikut
Lokal. Dalam nilai ini, gambar latar belakang digulir bersama dengan kontennya
Memperbaiki. Menggunakan nilai ini memperbaiki gambar latar belakang dengan halaman
Menggulir. Gambar latar belakang digulir bersama dengan halaman menggunakan nilai ini
Sintaks. lampiran-latar belakang. lokal. memperbaiki. menggulir. awal
Atasi Masalah Gambar Latar CSS Tidak Berfungsi dengan Mempercepat Gambar Latar Belakang
Gambar latar tidak berfungsi atau dimuat di CSS adalah masalah umum. Salah satu cara untuk mengatasi masalah ini adalah mempercepat gambar latar belakang. Gambar latar biasanya digunakan sebagai gambar unggulan atau penggeser. Sering membutuhkan waktu untuk memuat gambar-gambar ini, yang menyebabkan masalah seperti gambar tidak dimuat atau tidak berfungsi
Namun, cara termudah untuk mengatasi masalah ini adalah dengan meningkatkan kecepatan gambar latar situs web Anda. Metode berikut berguna untuk mempercepat gambar latar belakang
– Pramuat Gambar latar belakang
Dengan pra-pemuatan, gambar latar dari lipatan Anda sudah dimuat. Di bawah metode ini, nilai prioritas dari background-image diatur. Di mana browser diperintahkan untuk mengunduh gambar latar pada prioritas utama
var gambar = Gambar latar belakang ();
var image2 = Gambar latar belakang ();
var image3 = Gambar latar belakang ();
gambar. src="background_images/pic/image1. png”;
gambar2. src = background_images/pic/image2. png”;
gambar3. src= gambar_latar belakang/gambar/gambar3. png”;
– Gunakan Object Fit dan IMG Tag Bersama
Object Fit adalah properti CSS baru. Properti ini digunakan dengan tag IMG tanpa mengubah ukuran gambar latar. Karena penggunaan properti ini, gambar latar diunggah dengan cepat dan kualitasnya tetap utuh
img {lebar. 100px;
tinggi. 150px;
sesuai objek. menurunkan;}
– Gambar Responsif
Anda dapat mengirimkan gambar responsif dengan menambahkan ukuran dan srcset ke gambar normal
bg{Background_images. url(“gambar. jpg”);
Background_images. kumpulan gambar{
"gambar. jpg” 1×;
“gambar-2×. jpg” 2×;
“gambar-cetak. jpg” 600dpi
}}
– Gambar Latar Belakang Sebaris
Misalkan gambar latar situs web Anda ada di file CSS eksternal, sebariskan gambar itu dengan file HTML. Dengan cara ini, browser akan mendownload gambar langsung dari HTML, dan browser tidak perlu menunggu untuk mendownload gambar dari file CSS. Akibatnya, pemuatan gambar latar akan dipercepat, dan masalah gambar latar css yang tidak berfungsi akan teratasi
Cara Memperbaiki Gambar Sampul Latar Belakang CSS Tidak Berfungsi
Anda dapat memperbaiki gambar sampul latar belakang yang tidak berfungsi dengan menggunakan kode ini
Pengujian Sampul Latar Belakang
tubuh {margin. 1;
tinggi. 200vh;
Latar Belakang. biru, url(https. //Latar Belakang. itu/2000/2000); . berkembang biak;
background-size. memperbaiki;
}
wadah {lebar. 90%;
batas. 0 otomatis;
tengah; . #0000;
tempat-item
menampilkan. kisi;
}
Sampul Latar Belakang
Gambar Latar Belakang
memperbaiki masalah gambar latar belakang
Kesimpulan
Akibatnya, sangat penting untuk mengatasi semua poin berikut untuk mengatur gambar latar belakang di CSS dengan sempurna
- Sematkan file CSS dengan benar dengan HTML
- Gunakan sintaks yang benar dari kode CSS dan HTML
- Mempercepat gambar latar belakang
- Tetapkan jalur gambar dengan benar
- Perbaiki dengan jelas tinggi dan lebar gambar latar belakang
Seperti yang Anda ketahui, gambar memainkan peran penting dalam membuat situs web kami menarik. Jika Anda menemukan gambar latar CSS situs web Anda tidak berfungsi, URL gambar latar tidak berfungsi, CSS gambar latar tidak berfungsi, dan gambar latar CSS tidak dimuat. Anda dapat mengikuti teknik yang telah kami sebutkan di artikel ini. Semua teknik ini sangat berguna dan efisien
Nilai posting ini
Posisi adalah Segalanya
Posisi Adalah Segalanya. Sumber Daya Masuk Anda untuk Belajar & Membangun. CSS,JavaScript,HTML,PHP,C++ dan MYSQL