Kemampuan untuk meregangkan gambar latar ke lebar penuh jendela browser menggunakan CSS hanya muncul dengan merilis spesifikasi terbarunya - CSS3. Sayangnya, sejauh ini banyak peselancar web menggunakan browser awal yang tidak memahami spesifikasi CSS3. Oleh karena itu, Anda harus membuat pilihan - baik menggunakan solusi lintas-browser yang kurang nyaman, atau teknologi tinggi, tetapi untuk audiens terbatas. Mari kita pertimbangkan kedua opsi.
Diperlukan
Pengetahuan dasar tentang HTML dan CSS
instruksi
Langkah 1
Opsi pertama didasarkan pada spesifikasi bahasa CSS sebelumnya. Anda perlu membuat struktur kode HTML yang memiliki dua lapisan yang tumpang tindih, satu di atas yang lain. Lapisan (div) dapat direntangkan ke lebar layar dalam spesifikasi bahasa deskripsi gaya kaskade lama. Di bagian bawah lapisan Anda perlu menempatkan gambar latar belakang, dan di bagian atas akan menempatkan semua konten halaman. Struktur seperti itu di badan dokumen mungkin terlihat seperti ini:
Ini akan menjadi konten halaman
Dan deskripsi gaya untuk struktur ini harus ditempatkan di bagian heading. Misalnya, ini:
html, isi {
margin: 0 piksel;
tinggi: 100%;
}
#Latar Belakang {
posisi: mutlak;
lebar: 100%;
tinggi: 100%;
}
#tubuh {
posisi: mutlak;
lebar: 100%;
tinggi: 100%;
indeks-z: 2;
}
Di sini lapisan dengan latar belakang ID (ini adalah gambar latar belakang Anda) dan badan (ini adalah lapisan untuk konten halaman) diatur ke posisi absolut dan lebar dan tinggi 100%. Selain itu, lapisan konten diberi nomor seri indeks-z = 2. Ini menentukan "kedalaman" lapisan - semakin besar, semakin jauh dari "bawah" lapisan ini berada. Dalam kasus kami, itu akan berada di atas lapisan latar belakang, yang menggunakan indeks-z default.
Langkah 2
Kode lengkapnya mungkin terlihat seperti ini:
html, isi {
margin: 0 piksel;
tinggi: 100%;
}
#Latar Belakang {
posisi: mutlak;
lebar: 100%;
tinggi: 100%;
}
#tubuh {
posisi: mutlak;
lebar: 100%;
tinggi: 100%;
indeks-z: 2;
}
Ini akan menjadi konten halaman
Jangan lupa ganti nama file gambar background fon.png.
Langkah 3
Opsi kedua akan menggunakan properti background-size yang diperkenalkan di CSS3. Pada saat yang sama, tambahkan properti serupa dengan definisi gaya yang sebelumnya digunakan oleh browser Mozilla Firefox, Google Chrome, dan Opera. Blok deskripsi gaya dalam versi ini mungkin terlihat seperti ini:
html {
latar belakang: url (fon.png) pusat pusat tanpa pengulangan tetap;
-webkit-background-size: sampul;
-moz-background-size: penutup;
-o-background-size: penutup;
ukuran latar belakang: sampul;
}
Dan disini jangan lupa ganti nama file gambar background fon.png. Dan di badan dokumen itu sendiri, tidak ada konstruksi khusus yang diperlukan dalam versi ini.
