Gunakan CSS untuk mewujudkan desain web latar belakang yang besar

Penulis：Eve Cole Waktu Pembaruan：2009-06-12 17:52:52

Sejak penulis merilis koleksi desain web latar belakang yang besar, saya telah menerima banyak email yang menanyakan bagaimana menggunakan CSS untuk mencapai desain web latar belakang yang besar. Oleh karena itu, saya memutuskan untuk berbagi dengan Anda keterampilan desain situs web berlatar belakang besar. Dalam tutorial ini, saya akan menggunakan beberapa contoh untuk mengilustrasikan bagaimana menggunakan satu atau dua gambar untuk mencapai desain situs web berlatar belakang besar.

Kesalahan umum: Latar belakang terpotong.

Saat melihat file contoh, tidak ada masalah bila resolusinya lebih kecil dari 1280. Namun jika monitor Anda memiliki resolusi lebih besar dari 1280 piksel, Anda akan melihat bagian selain gambar latar belakang.

Solusi sederhana untuk masalah ini: atur warna tepi gambar agar sama dengan warna latar belakang halaman web. Disini saya menggunakan Web Designer Wall sebagai contohnya. Perhatikan gambar di bawah ini. Perhatikan bahwa tepi gambarnya berwarna solid.

Bagian CSS

Bagian ini sangat sederhana, atur gambar latar belakang untuk elemen body (posisinya di tengah, atas)

Berikut kode cssnya:

tubuh {
bantalan: 0;
margin: 0;
latar belakang: #f8f7e5 url(wdw-bg.jpg) tengah atas tanpa pengulangan;
lebar: 100%;
tampilan: meja;
}

Perhatikan bahwa ada dua baris tambahan di dalam pemilih isi. Hal ini untuk mencegah gambar latar belakang berubah ketika jendela browser lebih kecil dari lebar konten, yang akan terjadi di Firefox.