Jika kamu merancang situs web, Anda mungkin tertarik untuk mempelajari cara membuat gambar latar belakang atau tanda air tetap di halaman web. Ini adalah perawatan desain umum yang telah populer secara online selama beberapa waktu. Ini adalah efek yang berguna untuk dimiliki dalam tas trik desain web Anda.
Jika Anda belum pernah melakukan ini sebelumnya atau telah mencobanya sebelumnya tanpa hasil, prosesnya mungkin tampak menakutkan, tetapi sebenarnya tidak terlalu sulit sama sekali. Dengan tutorial singkat ini, Anda akan mendapatkan informasi yang Anda butuhkan untuk mempelajari teknik ini dalam hitungan menit menggunakan CSS.
Mulai
Gambar latar belakang atau tanda air (yang sebenarnya hanya gambar latar yang sangat terang) memiliki sejarah dalam desain cetak. Dokumen telah lama menyertakan tanda air pada mereka untuk mencegahnya disalin. Selain itu, banyak pamflet dan brosur menggunakan gambar latar belakang yang besar sebagai bagian dari desain karya cetak. Desain web telah lama meminjam gaya dari cetakan dan gambar latar belakang adalah salah satu gaya pinjaman ini.
Gambar latar belakang besar ini mudah dibuat menggunakan tiga berikut: gaya CSS properti:
- gambar latar belakang
- latar belakang-ulangi
- lampiran-latar belakang
- 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-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 "tanda air" lihat di mana gambar semi-transparan terletak 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 untuk dibaca.
Anda dapat menyesuaikan gambar latar belakang dalam program pengeditan apa pun seperti Adobe Photoshop.
Latar Belakang-Ulangi
Properti background-repeat datang berikutnya. Jika Anda ingin gambar Anda menjadi grafik bergaya tanda air yang besar, Anda akan menggunakan properti ini untuk membuat gambar tersebut hanya ditampilkan sekali.
background-repeat: tidak-ulangi;
Tanpa jangan ulangi properti, 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.
Latar Belakang-Lampiran
Background-attachment adalah properti yang sering dilupakan oleh banyak web designer. Menggunakannya membuat gambar latar belakang Anda tetap di tempatnya saat Anda menggunakan tetap Properti. Inilah yang mengubah gambar itu menjadi tanda air yang dipasang di halaman.
Nilai default untuk properti ini adalah gulir. Jika Anda tidak menentukan nilai lampiran latar belakang, latar belakang akan bergulir bersama halaman lainnya.
lampiran-latar belakang: diperbaiki;
Latar Belakang-Ukuran
Background-size adalah properti CSS yang lebih baru. Ini memungkinkan Anda untuk mengatur ukuran latar belakang berdasarkan viewport yang sedang dilihat. Ini sangat membantu untuk situs web responsif yang akan ditampilkan pada ukuran yang berbeda pada perangkat yang berbeda.
ukuran latar belakang: sampul;
Dua nilai bermanfaat yang dapat Anda gunakan untuk properti ini meliputi:
- Penutup – Menskalakan 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.
- Berisi – Menskalakan gambar sehingga seluruh lebar dan tinggi ditampilkan di area yang sedang ditata. Gambar tidak terpotong, tetapi kekurangannya adalah sebagian area mungkin tidak tercakup 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 yang berikut ini ke HEAD halaman web Anda jika Anda membuat situs satu halaman. Tambahkan ke gaya CSS lembar gaya eksternal jika Anda sedang membangun situs multi-halaman dan ingin memanfaatkan kekuatan lembar eksternal.
Ubah URL gambar latar belakang Anda agar sesuai dengan nama file dan jalur file tertentu yang relevan dengan situs Anda. Buat perubahan lain yang sesuai agar sesuai dengan desain Anda juga dan Anda akan memiliki tanda air.
Anda Dapat Menentukan Posisi Juga
Jika Anda ingin menempatkan tanda air di lokasi tertentu di halaman web Anda, Anda juga dapat melakukannya. Misalnya, Anda mungkin ingin tanda air di tengah halaman atau mungkin di sudut bawah, sebagai lawan dari sudut atas, yang merupakan default.
Untuk melakukan ini, tambahkan properti background-position ke style Anda. Ini akan menempatkan gambar di tempat yang Anda inginkan untuk muncul. Anda dapat menggunakan nilai piksel, persentase, atau perataan untuk mencapai efek pemosisian tersebut.
latar belakang-posisi: tengah;