Jalankan teknik dengan CSS
Jika Anda mendesain situs web, Anda mungkin tertarik untuk mempelajari cara membuat gambar latar belakang atau tanda air pada halaman web. Ini adalah perawatan desain umum yang telah populer secara online selama beberapa waktu. Ini adalah efek yang berguna untuk dimiliki dalam kantong desain web Anda.
Jika Anda belum pernah melakukan ini sebelumnya atau pernah mencobanya sebelumnya tanpa keberuntungan, prosesnya mungkin tampak mengintimidasi, tetapi sebenarnya tidak terlalu sulit sama sekali. Dengan tutorial singkat ini, Anda akan mendapatkan informasi yang Anda perlukan untuk menguasai teknik dalam hitungan menit menggunakan CSS.
Mulai
Gambar latar belakang atau tanda air (yang benar-benar hanya gambar latar yang sangat ringan) memiliki sejarah dalam desain cetak. Dokumen sudah lama menyertakan tanda air pada mereka untuk mencegahnya disalin. Selain itu, banyak selebaran dan brosur menggunakan gambar latar besar sebagai bagian dari desain untuk bagian yang dicetak. Desain web telah lama meminjam gaya dari cetak dan gambar latar belakang adalah salah satu gaya yang dipinjam.
Gambar latar belakang yang besar ini mudah dibuat menggunakan tiga properti gaya CSS berikut:
- gambar latar belakang
- background-repeat
- background-attachment
- ukuran latar belakang
Gambar latar belakang
Anda akan menggunakan gambar latar belakang untuk menentukan gambar yang akan digunakan sebagai tanda air Anda. Gaya ini hanya menggunakan jalur file untuk memuat gambar yang Anda miliki di situs Anda, kemungkinan di direktori bernama "gambar."
background-image: url (/images/page-background.jpg);
Sangat penting bahwa gambar itu sendiri lebih terang atau lebih transparan daripada gambar normal. Ini akan membuat tampilan "watermark" di mana gambar semi-transparan berada di belakang teks, grafik, dan elemen utama lainnya dari halaman web. Tanpa langkah ini, gambar latar belakang akan bersaing dengan informasi di halaman Anda dan membuatnya sulit dibaca.
Anda dapat menyesuaikan gambar latar belakang dalam program pengeditan seperti Adobe Photoshop.
Background-Repeat
Properti pengulangan latar belakang datang berikutnya. Jika Anda ingin gambar Anda menjadi grafis bergaya watermark yang besar, Anda akan menggunakan properti ini untuk membuat gambar itu hanya ditampilkan sekali.
background-repeat: no-repeat;
Tanpa properti "no-repeat", defaultnya adalah gambar akan berulang-ulang di halaman. Ini tidak diinginkan di sebagian besar desain halaman web modern, jadi gaya ini harus dianggap penting dalam CSS Anda.
Background-Attachment
Background-attachment adalah properti yang dilupakan banyak desainer web. Menggunakannya membuat gambar latar belakang Anda tetap di tempatnya saat Anda menggunakan properti "tetap". Inilah yang mengubah gambar itu menjadi tanda air yang ditetapkan di halaman.
Nilai default untuk properti ini adalah "gulir." Jika Anda tidak menentukan nilai latar belakang-lampiran, latar belakang akan bergulir bersama dengan sisa halaman.
background-attachment: diperbaiki;
Ukuran Latar Belakang
Ukuran latar belakang adalah properti CSS yang lebih baru. Hal ini memungkinkan Anda untuk mengatur ukuran latar belakang berdasarkan viewport yang sedang dilihat. Ini sangat membantu untuk situs web responsif yang akan ditampilkan pada berbagai ukuran pada perangkat yang berbeda .
background-size: cover;
Dua nilai bermanfaat yang dapat Anda gunakan untuk properti ini meliputi:
- Sampul - Menyesuaikan latar belakang sehingga lebar penuh atau tinggi penuh ditampilkan. Ini berarti bahwa beberapa bagian gambar mungkin tidak muncul di layar tetapi seluruh area akan tertutup.
- Contain - Menyusun gambar sehingga seluruh lebar dan tinggi ditampilkan di area yang ditata. Gambar tidak terpotong, tetapi sisi negatifnya adalah bagian-bagian dari area tersebut mungkin tidak tertutup oleh gambar.
Menambahkan CSS ke Halaman Anda
Setelah Anda memahami properti di atas dan nilainya, Anda dapat menambahkan gaya ini ke situs web Anda.
Tambahkan hal berikut ke HEAD dari halaman web Anda jika Anda membuat situs satu halaman. Tambahkan ke gaya CSS dari style sheet eksternal jika Anda sedang membangun situs multi-halaman dan ingin memanfaatkan kekuatan lembaran eksternal.