Gambar latar: pintu pertama ke CSS

Setelah belajar <img>, pertanyaan yang hampir selalu muncul: “kalau mau gambarnya jadi latar belakang (background) halaman, gimana?”

Jawabannya mengejutkan: bukan dengan HTML. Gambar latar adalah urusan CSSCSSBahasa untuk mengatur tampilan halaman web, seperti warna, ukuran, dan jarak.Penjelasan lengkap →. Ingat pembagian tugasnya: HTML itu kerangka, CSS itu baju. Latar belakang itu masuk urusan baju.

Pelajaran ini sekaligus jadi pintu kecil pertamamu ke CSS. Kelas CSS yang lengkap menyusul nanti. Kali ini kita cuma ambil yang kita perlukan.

Bentuk dasar CSS

Satu aturan CSS bentuknya begini:

selector {
  properti: nilai;
}

Bacanya: “untuk elemen ini (selectorSelectorBagian CSS yang menunjuk elemen mana yang mau didandani, misalnya h1 atau .kartu.Penjelasan lengkap →), atur sifat ini (propertiProperti (CSS)Hal yang mau diubah pada tampilan, seperti color untuk warna tulisan atau font-size untuk ukuran huruf.Penjelasan lengkap →) menjadi nilai itu.” Contohnya:

body {
  color: darkblue;
}

Artinya: “untuk body (seluruh isi halaman), jadikan warna tulisan biru tua”. Perhatikan tanda : setelah nama properti, dan tanda ; di akhir tiap baris.

Menautkan berkas CSS

CSS biasanya ditulis di berkas terpisah berekstensi .css, misalnya css/gaya.css. Supaya HTML-mu memakainya, sambungkan lewat tag <link> di dalam <head>:

<link rel="stylesheet" href="css/gaya.css">

href berisi alamat berkas CSS. Ya, itu pathPath (alamat berkas)Tulisan yang menunjukkan di folder mana sebuah berkas berada, misalnya gambar/kucing.svg.Penjelasan lengkap → yang sama dengan pelajaran 5, dihitung dari index.html. Sama seperti <img>, tag ini tidak punya penutup.

Memasang gambar latar

Properti untuk gambar latar namanya background-image. Nilainya ditulis dengan url(...), isinya alamat gambar:

body {
  background-image: url("../gambar/latar.svg");
}

Lihat ../ di depan? Itu bagian terpenting pelajaran ini.

Kunci pelajaran: alamat dihitung dari berkas CSS

Pegangan yang sudah kamu tahu: alamat dihitung dari berkas yang menuliskannya. Di index.html, itu berarti dari folder index.html. Tapi di dalam gaya.css, yang menuliskan alamatnya adalah berkas CSS, jadi alamat dihitung dari lokasi gaya.css, bukan dari index.html.

Foldernya begini:

proyek/
├── index.html
├── css/
│   └── gaya.css
└── gambar/
    ├── latar.svg
    └── pola.svg

gaya.css berdiri di dalam folder css. Untuk sampai ke gambar/latar.svg, ia harus naik dulu satu tingkat ke proyek (itulah ../), baru masuk folder gambar:

Gambar yang sama, tetapi alamatnya berbeda karena yang menulis berdiri di tempat berbeda.

Mengatur latar

Gambar latar punya tiga pengaturan penting:

Biasanya gambar besar dipakai dengan cover dan no-repeat. Gambar kecil berpola (seperti ubin) dipakai dengan repeat.

Coba sendiri: pasang latar

Di kotak ini ada proyek lengkap. Buka css/gaya.css (daftar berkas di kiri atas), lalu:

1. Di dalam aturan body, tambahkan background-image yang memanggil latar.svg. Perhatikan kotak Cek alamat berkas: ia ikut mengecek alamat di dalam berkas CSS.
2. Tambahkan background-size: cover;, background-repeat: no-repeat;, dan background-position: center;.

Lalu bereksperimen:

• Hapus ../ dari alamatnya, lihat latarnya hilang dan kotak pengecek memberi saran.
• Ganti alamatnya ke ../gambar/pola.svg dan ubah no-repeat jadi repeat. Sekarang polanya mengubin.
• Ubah cover jadi contain pada latar.svg dan lihat bedanya.

Jangan lupa: tulisan harus tetap terbaca

Gambar latar yang indah tidak ada gunanya kalau tulisannya tenggelam. Tiga kebiasaan yang membantu:

• Pilih gambar yang tenang (gradasi lembut, bukan foto ramai) kalau ada banyak tulisan di atasnya.
• Pastikan warna tulisan kontras dengan latar: tulisan gelap di latar terang, atau sebaliknya.
• Taruh tulisan di atas kotak yang berwarna agak solid. Di latihan tadi, kotak putih semi-transparan membuat tulisan tetap jelas walau latarnya berwarna.

Tes sederhananya: lihat halamanmu dari jarak satu lengan. Kalau tulisannya susah dibaca, kontrasnya kurang.

Kesalahan umum

• Alamat salah dari sudut berkas CSS (lupa ../). Ini penyebab nomor satu.
• Lupa menautkan <link> di <head>, sehingga CSS tidak berlaku sama sekali.
• Lupa tanda ; di ujung baris properti.
• Tanda kutip tidak lengkap pada url("...").
• Gambar terlalu ramai, sehingga tulisan susah dibaca.

Kelas CSS lengkap akan menyusul, di sana kamu belajar warna, ukuran, tata letak, dan banyak lagi. Yang penting kamu sudah pegang satu hal: CSS punya aturan alamat sendiri.