Berikan minat visual situs web Anda dengan grafis latar belakang
Gambar adalah bagian penting dari desain situs web yang menarik. Ini termasuk penggunaan gambar latar belakang. Ini adalah gambar dan grafik yang digunakan di belakang area halaman yang bertentangan dengan gambar yang disajikan sebagai bagian dari halaman konten. Gambar latar belakang ini dapat menambahkan minat visual ke halaman dan membantu Anda mencapai desain visual yang mungkin Anda cari pada suatu halaman.
Jika Anda mulai bekerja dengan gambar latar belakang, Anda pasti akan mengalami skenario di mana Anda ingin gambar diregangkan agar sesuai dengan halaman.
Ini terutama berlaku untuk situs web responsif yang dikirimkan ke berbagai perangkat dan ukuran layar .
Keinginan untuk meregangkan gambar latar belakang ini adalah keinginan yang sangat umum bagi perancang web karena tidak semua gambar cocok dalam ruang situs web. Alih-alih mengatur ukuran tetap, peregangan gambar memungkinkannya melenturkan agar sesuai dengan halaman tidak peduli seberapa lebar atau sempit jendela browser .
Cara terbaik untuk meregangkan gambar agar sesuai dengan latar belakang halaman adalah menggunakan properti CSS3 , untuk ukuran latar belakang. Berikut ini contoh yang menggunakan gambar latar belakang untuk badan laman dan yang menyetel ukuran menjadi 100% sehingga akan selalu meregang agar sesuai dengan layar.
body {
latar belakang: url (bgimage.jpg) no-repeat;
ukuran latar belakang: 100%;
}
Menurut caniuse.com, properti ini berfungsi di IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, dan di semua peramban seluler utama. Ini mencakup Anda untuk semua browser modern yang tersedia saat ini, yang berarti Anda harus menggunakan properti ini tanpa rasa takut bahwa itu tidak akan berfungsi pada layar seseorang.
Memalsukan Latar Belakang yang Membentang di Browser Lama
Sangat tidak mungkin Anda perlu mendukung semua browser yang lebih lama dari IE9, tetapi mari kita asumsikan bahwa Anda khawatir bahwa IE8 tidak mendukung properti ini. Dalam contoh itu, Anda dapat memalsukan latar belakang yang melar. Dan Anda dapat menggunakan awalan browser untuk Firefox 3.6 (-moz-background-size) dan Opera 10.0 (-o-background-size).
Cara termudah untuk memalsukan gambar latar belakang adalah dengan merentangkannya di seluruh halaman. Maka Anda tidak berakhir dengan ruang ekstra atau harus khawatir bahwa teks Anda cocok di daerah yang membentang. Inilah cara melakukannya:
id = "bg" />
- Pertama, pastikan bahwa semua browser memiliki tinggi 100%, 0 margin, dan 0 padding pada elemen HTML BODY. Tempatkan yang berikut di kepala dokumen HTML Anda:
- Tambahkan gambar yang Anda inginkan sebagai latar belakang sebagai elemen pertama dari halaman web, dan berikan id "bg":
- Posisikan gambar latar belakang sehingga tetap di bagian atas dan kiri dan lebarnya 100% dan 100%. Tambahkan ini ke style sheet Anda:
img # bg {
posisi: diperbaiki;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 100%;
} - Tambahkan semua konten Anda ke halaman di dalam elemen DIV dengan ID "konten". Tambahkan DIV di bawah gambar:
Catatan: menarik untuk melihat halaman Anda sekarang. Gambar harus ditampilkan membentang, tetapi konten Anda benar-benar hilang. Mengapa? Karena gambar latar belakang adalah 100% tinggi, dan pembagian konten setelah gambar dalam aliran dokumen - sebagian besar browser tidak akan menampilkannya.Semua konten Anda di sini - termasuk header, paragraf, dll.
- Posisikan konten Anda sehingga relatif dan memiliki indeks-z 1. Ini akan membawanya di atas gambar latar belakang di browser yang sesuai standar. Tambahkan ini ke style sheet Anda:
#content {
posisi: relatif;
z-index: 1;
}
- Tapi kamu belum selesai. Internet Explorer 6 tidak memenuhi standar dan masih memiliki beberapa masalah. Ada banyak cara untuk menyembunyikan CSS dari setiap browser tetapi IE6, tetapi yang paling mudah (dan paling tidak menyebabkan masalah lain) adalah menggunakan komentar bersyarat. Letakkan berikut ini setelah stylesheet Anda di bagian atas dokumen Anda:
- Di dalam komentar yang disorot, tambahkan lembar gaya lain dengan beberapa gaya agar IE 6 bermain bagus:
- Pastikan untuk menguji di IE 7 dan IE 8 juga. Anda mungkin perlu menyesuaikan komentar untuk mendukung mereka juga. Namun, itu berhasil ketika saya mengujinya.
OK - ini diakui CARA berlebihan. Sangat sedikit situs yang perlu mendukung IE 7 atau 8 lagi, apalagi IE6!
Dengan demikian, pendekatan ini kuno dan mungkin tidak perlu bagi Anda. Saya meninggalkannya di sini lebih sebagai model rasa ingin tahu tentang betapa jauh lebih sulitnya hal-hal sebelum semua browser kami dimainkan dengan sangat baik bersama-sama!
Memalsukan Citra Latar Belakang yang Membentang di Ruang Yang Lebih Kecil
Anda dapat menggunakan teknik yang serupa untuk memalsukan gambar latar yang diregangkan melalui DIV atau elemen lain di halaman web Anda. Ini sedikit rumit karena Anda harus menggunakan pemosisian absolut atau memiliki masalah pengaturan jarak yang aneh untuk bagian lain dari halaman Anda.
- Tempatkan gambar pada halaman yang ingin saya gunakan sebagai latar belakang.
- Di lembar gaya, atur lebar dan tinggi untuk gambar. Catatan, Anda dapat menggunakan persentase untuk lebar atau tinggi, tetapi saya merasa lebih mudah untuk menyesuaikan dengan nilai panjang untuk ketinggian.
img # bg {
lebar: 20em;
tinggi: 30em;
} - Tempatkan konten Anda dalam div dengan id "konten" seperti yang kami lakukan di atas:
Semua konten Anda di sini
- Beri style pada div konten agar memiliki lebar dan tinggi yang sama dengan gambar latar belakang:
div # content {
lebar: 20em;
tinggi: 30em;
} - Kemudian posisikan konten ke ketinggian yang sama dengan gambar. Jadi, jika gambar Anda 30m Anda akan memiliki gaya atas: -30em; Jangan lupa untuk meletakkan indeks-z dari 1 pada konten.
#content {
posisi: relatif;
atas: -30em;
z-index: 1;
lebar: 20em;
tinggi: 30em;
} - Kemudian tambahkan indeks-z dari -1 untuk pengguna IE 6, seperti yang Anda lakukan di atas:
Sekali lagi, dengan ukuran latar belakang menikmati dukungan browser yang luas sekarang, pendekatan ini juga sangat tidak perlu dan disajikan sebagai produk dari zaman dulu. Jika Anda memang ingin menggunakan pendekatan ini, pastikan untuk menguji ini di sebanyak mungkin browser.
Dan jika konten Anda berubah ukuran, Anda harus mengubah ukuran penampung dan gambar latar belakang Anda, jika tidak, Anda akan berakhir dengan hasil yang aneh.