Bagaimana Membuat Imej Latar Belakang Sesuai dengan Div Dengan Sempurna Menggunakan CSS?

Memasang Imej Latar Belakang pada Div

Apabila meletakkan imej latar belakang dalam div, adalah perkara biasa untuk menghadapi isu di mana imej dipotong padam atau tidak sesuai dengan betul. Untuk menangani masalah ini, CSS menawarkan sifat bersaiz latar belakang, membolehkan kawalan tepat ke atas penskalaan dan kedudukan imej latar belakang.

Menskalakan Imej Latar Belakang agar Sesuai Di Dalam Div

Untuk memastikan imej latar belakang dipaparkan dalam sempadan div tanpa sebarang pemangkasan, tetapkan sifat saiz latar belakang kepada mengandungi:

background-size: contain;

Menskalakan Imej Latar Belakang untuk Meliputi Keseluruhan Div

Sebagai alternatif, untuk menjadikan imej latar belakang menduduki keseluruhan div, skalakannya menggunakan penutup:

background-size: cover;

Visual Demonstrasi

Pertimbangkan kod HTML berikut dengan div yang mengandungi imej latar belakang:

<div>
<p>Untuk mengelakkan imej daripada dipotong, gunakan sifat bersaiz latar belakang:</p>
<pre class="brush:php;toolbar:false">#mainpage {
  background-size: contain;
}

Sebagai alternatif, untuk menjadikan imej meliputi keseluruhan div:

#mainpage {
  background-size: cover;
}