Tutorial CSS / Warna dan Gambar Latar CSS: cover dan contain

Latar CSS dapat mengisi elemen dengan warna atau gambar sambil membiarkan konten HTML tetap tidak berubah. background-size: cover mengisi area dan bisa memotong gambar; contain menampilkan seluruh gambar dan mungkin menyisakan ruang yang tidak terpakai.

Pahami warna dan gambar latar

Warna latar belakang terlihat di tempat tidak ada gambar dan di belakang area transparan. Warna latar belakang dapat tetap ada meskipun gambar belum dimuat. Gambar latar belakang itu sendiri bukan merupakan konten elemen dan tidak secara otomatis membuat tinggi elemen. Jika Anda hanya menaruh URL gambar di div kosong dan tidak menentukan tinggi, mungkin tidak akan ada area untuk menampilkan. Saat menampilkan foto yang bermakna sebagai konten HTML, bandingkan dengan contoh menggunakan Gambar dan Video Responsif: aspect-ratio dan object-fit.

.sample {
  height: 300px;
  background-color: #e8e8e8;
  background-image: url("images/landscape.webp");
}

Jika gambar itu sendiri menyampaikan informasi, seperti foto atau diagram penjelasan dalam teks, maka menggunakan HTML img dan teks alternatif adalah tepat. Anda tidak bisa langsung menempelkan atribut alt ke latar belakang CSS. Di kotak latihan kosong dalam pelajaran ini, Anda akan menempatkan nama aksesibilitas yang menjelaskan hasil perbandingan, tetapi Anda tidak perlu menambahkan peran setiap kali menggunakan latar belakang dekoratif dalam layanan yang sebenarnya. Jangan meletakkan deskripsi penting hanya di gambar latar belakang.

Siapkan gambar contoh dan folder

Buka gambar latar latihan 600×400 di bawah ini dan simpan dengan nama landscape.webp. Gunakan pohon di kiri dan kanan serta lingkaran di tengah sebagai objek perbandingan. Masukkan gambar berperbandingan 3:2 ke dalam kotak persegi sehingga mudah melihat bagian mana yang terpotong.

background-practice/
  backgrounds.html
  images/
    landscape.webp

Karena contoh menanamkan CSS-nya di backgrounds.html, images/landscape.webp diselesaikan dari dokumen HTML itu. Jika Anda memindahkan gaya ke css/style.css, gunakan ../images/landscape.webp untuk gambar yang sama. URL relatif di CSS eksternal diselesaikan dari stylesheet. Periksa juga huruf besar-kecil nama file dan ekstensi. Untuk detail lebih lanjut, lihat MDN: background-image dan URL gambar . Lihat Menerapkan CSS: Inline, Internal, dan Eksternal .

Bandingkan cover dan contain

Dimensi ini mengasumsikan area latar belakang 300 × 300, posisi di tengah, tanpa pengulangan, dan tanpa border atau padding. cover mengisi area dengan memotong sebagian gambar; contain mempertahankan seluruh gambar dan menampilkan warna latar belakang di ruang yang tidak terpakai. Ketika rasio gambar dan area sama, kedua hasil dapat terlihat identik. Lihat MDN: ukuran latar belakang.

Perbandingan skematis menggunakan lanskap 3:2 untuk menggambarkan dua perhitungan ukuran. Dengan cover, sisi-sisi dipotong. Dengan contain, seluruh gambar tetap terlihat dan latar belakang abu-abu muncul di atas dan di bawahnya. Contoh lengkap memungkinkan Anda membandingkan efek ini dengan gambar praktik yang disediakan.

Jika Anda membandingkan cover·contain dengan hanya gradien CSS yang tidak memiliki ukuran dan rasio unik, perbedaannya akan hampir tidak terlihat karena mengisi area yang sama. Untuk latihan cropping, gunakan file gambar dengan ukuran dan rasio tetap seperti sekarang.

Kontrol pengulangan dan posisi

.repeat {
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: left top;
}

.no-repeat {
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: left top;
}

background-size: 100px auto mengatur lebar menjadi 100px dan tinggi sesuai dengan rasio asli. repeat mengisi area latar dengan gambar kecil berulang kali, no-repeat menampilkannya hanya satu kali. Karena pengulangan dasar, gambar dapat diulang bahkan di ruang kosong contain, jadi tentukan no-repeat saat membandingkan seluruh gambar.

background-position menetapkan kriteria untuk menempatkan gambar. center membagi sisa ruang atau bagian yang dipotong ke kedua sisi, dan left top menyelaraskannya berdasarkan kiri atas. Jika Anda mengubah posisi di cover, ukurannya tidak berubah, tetapi sisi yang dipotong akan berubah. Contoh menggunakan properti terpisah, jadi berhati-hatilah untuk tidak menginisialisasi pengaturan lain nanti dengan menambahkan properti singkat background.

Jalankan contoh latar belakang lengkap

Simpan kode di bawah ini sebagai UTF-8 di backgrounds.html di folder yang telah disiapkan sebelumnya dan buka. Gunakan gambar yang sama di empat kotak untuk membandingkan ukuran dan pengulangan. Jika jendelanya sempit, lebar kotak akan berkurang dan tinggi tetap 300px, jadi ukuran potongan dan ruang kosong juga akan dihitung ulang.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing background image sizes</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }
    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;
      background-color: #e8e8e8; background-image: url("images/landscape.webp");
      background-position: center; background-repeat: no-repeat; }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }
    .no-repeat { background-size: 100px auto; background-position: left top; }
  </style>
</head>
<body>
  <h1>Comparing background images</h1>
  <h2>cover：Fill the box</h2><div class="sample cover" role="img" aria-label="Background with left and right sides cut out"></div>
  <h2>contain：Contains the entire picture</h2><div class="sample contain" role="img" aria-label="Background with empty space above and below"></div>
  <h2>repeat: small repetition</h2><div class="sample repeat" role="img" aria-label="Background with repeated small pictures"></div>
  <h2>no-repeat：Show small once</h2><div class="sample no-repeat" role="img" aria-label="Background with only one page displayed in the upper left corner"></div>
</body>
</html>

Ubah satu properti sekaligus

1. Pastikan di Developer Tools bahwa jendela cukup lebar sehingga dua kotak pertama berukuran 300×300. Bandingkan potongan kiri dan kanan dari cover dan ruang atas dan bawah dari contain.
2. Ubah hanya background-position dari cover menjadi left top. Setelah memastikan bahwa lebih banyak pohon di kiri terlihat dan lebih banyak di kanan terpotong, kembalikan ke center.
3. Ubah background-repeat di contain menjadi repeat. Periksa apakah bagian gambar terulang di ruang kosong dan kembalikan ke no-repeat.
4. Ubah ukuran .no-repeat dari 100px auto menjadi 100% 100%. Periksa apakah proporsi lingkaran tengah berubah dan kembalikan ke nilai aslinya.

Diagnosa gambar yang hilang dan pemotongan yang tidak diinginkan

• Buka tautan gambar latihan secara langsung untuk memastikan file asli terlihat. Periksa nama file yang tersimpan dan ekstensi sebenarnya, lalu hitung jalurnya sesuai lokasi HTML/CSS.
• Periksa permintaan gambar di panel Network di DevTools. Jika halaman disajikan melalui server web, respons 404 menunjukkan bahwa jalur perlu diperiksa. Pada berkas lokal, periksa pesan kegagalan pemuatan yang ditampilkan browser. Jika respon berhasil tetapi gambar tidak terlihat, periksa dimensi kotak dan deklarasi background-image yang diterapkan.
• Jika ingin mengisinya tanpa ruang kosong, periksa apakah itu menggunakan cover. Untuk menampilkan seluruh gambar, tentukan contain dan no-repeat secara bersamaan. Jika gambar diskalakan sama seperti kotak, perbedaan antara kedua nilai akan kecil.
• Jika Anda menambahkan latar belakang di belakang teks Anda, pastikan teks tersebut dapat dibaca baik di area terang maupun gelap. Karena tujuan pelajaran ini adalah untuk membandingkan gambar, teks penjelasan ditempatkan di luar kotak.

Sebelum memaksa meregangkan gambar latar belakang, tentukan apakah itu gambar yang perlu dilihat secara utuh atau hiasan yang bisa dipotong. Gambar yang perlu terlihat utuh untuk menyampaikan informasi, seperti foto produk atau diagram penjelasan, dan latar belakang dekoratif tidak boleh diperlakukan dengan standar yang sama.