Sejak penulis merilis koleksi desain web latar belakang besar, saya telah menerima banyak email yang menanyakan cara menggunakan CSS untuk mengimplementasikan desain web latar belakang yang besar. Karena itu, saya memutuskan untuk berbagi dengan Anda keterampilan desain situs web di latar belakang. Dalam tutorial ini, saya akan menggunakan beberapa contoh untuk menggambarkan cara menggunakan satu atau dua gambar untuk mengimplementasikan desain situs web latar belakang besar.
Kesalahan yang Sering Dibuat: Latar Belakang Dipotong
Melihat file sampel, tidak ada masalah ketika resolusi kurang dari 1280. Tetapi jika monitor Anda memiliki resolusi yang lebih besar dari 1280 piksel, Anda akan melihat bagian di luar gambar latar belakang.
Solusi sederhana untuk masalah: Atur warna tepi gambar ke warna yang sama dengan latar belakang halaman web. Di sini saya menggunakan Web Designer Wall sebagai contoh, lihat gambar di bawah ini, dan perhatikan bahwa tepi gambar adalah warna solid.
Bagian CSS
Bagian ini sederhana, atur gambar latar belakang untuk elemen tubuh (terletak di tengah, atas)
Ini kode CSS:
| tubuh { Padding: 0; Margin: 0; Latar Belakang: #F8F7E5 URL (WDW-BG.JPG) TOP PUSAT NO-REPEAT; Lebar: 100%; Tampilan: Tabel; } |
Perhatikan fakta bahwa ada dua baris tambahan dalam pemilih tubuh, sehingga gambar latar belakang berubah ketika jendela browser lebih kecil dari lebar konten, yang akan muncul di Firefox.
