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("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

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.

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

<. doctype html>

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

Bisakah saya menggunakan gambar latar belakang di CSS?

Properti CSS background-image memungkinkan Anda menempatkan gambar di belakang elemen HTML apa pun yang Anda inginkan . Ini bisa jadi seluruh halaman (dengan menggunakan pemilih tubuh di CSS yang menargetkan elemen

Mengapa gambar latar belakang tidak muncul di Div?

Saya merekomendasikan memindahkan css Anda dari cakupan inline . Dengan asumsi bahwa Anda. file png sebenarnya ada, coba atur ukuran latar belakang dan ulangi tag. Jika itu tidak berhasil, coba periksa alat pengembang browser Anda untuk kode respons dan pastikan urlnya benar.