Alih-alih warna latar belakang yang sederhana, Anda bisa menggunakan gambar latar belakang untuk blog Anda. Hal ini dapat ditata untuk melihat seperti wallpaper, bisa mengulang hanya secara vertikal maupun horizontal, dan bahkan dapat berada dalam posisi tetap di mana ia tetap di tempat sementara sisa gulungan halaman bawah!
Dalam posting ini, saya akan menjelaskan bagaimana Anda dapat menggunakan gambar latar belakang untuk blog Anda menggunakan metode yang berbeda, dengan contoh untuk menunjukkan bagaimana berbagai efek dapat dicapai.
Anda dapat menggunakan hampir semua gambar sebagai latar belakang untuk blog Anda. Biasanya gambar latar belakang dalam format JPEG, meskipun Anda juga bisa menggunakan itu GIF, atau BMP. Namun, Anda harus dapat host gambar pada server eksternal, seperti Blogger hanya host gambar yang terkandung dalam widget atau posting.
Sebelum Anda mulai menambahkan foto ke latar belakang Anda, mencari gambar yang ingin Anda gunakan, dan membuat catatan dari url mana host.
Seperti yang saya sebutkan dalam pengantar, ada beberapa cara yang berbeda Anda dapat menggunakan gambar latar belakang. Di sini saya akan menjelaskan:
Cara membuat mengulang gambar di seluruh halaman (seperti wallpaper)
Bagaimana membuat latar belakang mengulang secara vertikal ke bawah halaman
Bagaimana membuat latar belakang mengulang horizontal di halaman
Cara membuat gambar latar yang tetap (yang tidak gulir dengan sisa halaman
Semua metode yang mungkin dalam Blog Blogger, dan cukup sederhana untuk mencapainya.
Bagaimana membuat membuat mengulang gambar di seluruh halaman (seperti wallpaper)
Ini adalah sederhana dari semua efek latar belakang untuk mencapai. Kebanyakan orang memilih untuk menggunakan gambar kecil yang ubin mulus. Hal ini memastikan bahwa beban halaman lebih cepat, karena gambar memiliki ukuran file kecil.
Anda dapat dengan mudah menemukan gambar tersebut untuk latar belakang Anda dengan melakukan pencarian Google untuk latar belakang tileable , atau bahkan bisa membuat sendiri.
Saya membuat gambar ini sederhana untuk digunakan sebagai contoh, meskipun Anda bisa saja dengan mudah menggunakan gambar lainnya:
Untuk membuat gambar ini latar belakang keramik untuk blog Anda, pergi ke template> edit html dan mencari properti styling untuk tubuh dari blog Anda, yang harus terlihat seperti contoh di bawah ini:
body {
latar belakang: $ bgcolor;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
}
Kita perlu mengedit garis disorot dalam huruf tebal, yang mana kita mendeklarasikan properti latar belakang blog. Untuk menambahkan gambar mengulangi ke latar belakang, kita hanya menambahkan berikut (disorot dalam warna merah) untuk sifat tubuh:
body {
background:
url (http://www.imagehost.com/yourimage.jpg);
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
}
Dimana URL gambar sesuai dengan lokasi URL gambar Anda latar belakang.
Ini akan membuat gambar latar belakang mengulang di seluruh halaman,
Cara membuat gambar latar belakang mengulang secara vertikal ke bawah halaman.
Hal ini melibatkan penambahan sedikit berbeda dari kode pada template Anda, tetapi pada dasarnya prinsip yang sama. Sekali lagi Anda harus menemukan "tubuh" deklarasi gaya dalam template Anda dan menambahkan url untuk gambar latar belakang Anda. Juga, Anda perlu menyatakan bahwa latar belakang akan mengulangi pada "y" (vertikal)
body {
background: url (http://www.imagehost.com/yourimage.jpg)
repeat-y;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
}
Cara membuat mengulangi gambar latar belakang horizontal di halaman.
Hal ini sangat mirip dengan metode yang kita digunakan untuk ubin gambar vertikal. Namun, kali ini kita memberitahu browser untuk mengulang gambar pada "X" (horisontal).
body {
background: url (http://www.imagehost.com/yourimage.jpg)
repeat-x;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
}
Cara membuat gambar latar tetap .
Biasanya gambar yang lebih besar digunakan untuk metode ini, jadi untuk contoh ini kita akan menggunakan gambar berikut dari.
Untuk memastikan hal ini gambar latar belakang tidak mengulang, kita perlu menambahkan "tidak mengulang-" deklarasi ke properti latar belakang. Juga, kita perlu menambahkan pernyataan bahwa lampiran latar belakang tetap, sehingga latar belakang tidak bergerak dengan halaman. Di sini sekali lagi adalah contoh dari apa yang kode Anda harus terlihat seperti, dengan perubahan disorot dalam warna merah:
body {
background: url (http://www.imagehost.com/yourimage.jpg)
no-repeat;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
background-attachment: fixed}
Untuk memastikan hal ini gambar latar belakang tidak mengulang, kita perlu menambahkan "tidak mengulang-" deklarasi ke properti latar belakang. Juga, kita perlu menambahkan pernyataan bahwa lampiran latar belakang tetap, sehingga latar belakang tidak bergerak dengan halaman. Di sini sekali lagi adalah contoh dari apa yang kode Anda harus terlihat seperti, dengan perubahan disorot dalam warna merah:
body {
background: url (http://www.imagehost.com/yourimage.jpg) no-repeat;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
background-attachment: fixed}
Anda dapat menambahkan warna juga!
Kecuali Anda ubin gambar latar belakang Anda di seluruh halaman, Anda akan ditinggalkan dengan daerah putih kosong. Untuk mengisi bidang ini dengan warna pilihan Anda, Anda juga harus menambahkan warna pada properti background.
Jika Anda sudah memiliki "$ bgcolor" variabel dalam template blog Anda, Anda hanya dapat menambahkan variabel ini ke properti latar belakang, seperti ini:
background: $ bgcolor url (http://imagehost.com/yourimage.jpg) repeat-x;
Namun, jika Anda tidak memiliki variabel ini dalam template Anda, atau malah lebih memilih untuk menyatakan warna sendiri, Anda dapat melakukannya dengan menggunakan nilai Hex untuk warna yang Anda ingin ditampilkan. Ada sebuah kalkulator warna berguna dalam bagian alat yang dapat menghasilkan nilai-nilai hex membutuhkan. Berikut adalah contoh bagaimana Anda dapat mendeklarasikan nilai hex untuk warna di latar belakang Anda:
background: # ff0000 url (http://imagehost.com/yourimage.jpg) repeat-x;
Cara membuat mengulangi gambar latar belakang horizontal di halaman
Hal ini sangat mirip dengan metode yang kita digunakan untuk ubin gambar vertikal. Namun, kali ini kita memberitahu browser untuk mengulang gambar pada "X" (horisontal) sumbu, seperti ini:
body {
background: url (http://www.imagehost.com/yourimage.jpg)
repeat-x;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
}
Untuk memastikan hal ini gambar latar belakang tidak mengulang, kita perlu menambahkan "tidak mengulang-" deklarasi ke properti latar belakang. Juga, kita perlu menambahkan pernyataan bahwa lampiran latar belakang tetap, sehingga latar belakang tidak bergerak dengan halaman. Di sini sekali lagi adalah contoh dari apa yang kode Anda harus terlihat seperti, dengan perubahan disorot dalam warna merah:
body {
background: url (http://www.imagehost.com/yourimage.jpg)
no-repeat;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
background-attachment: fixed}
Dan di sini adalah contoh dari apa properti ini mencapai ( gunakan link ini untuk preview halaman penuh ):
Anda dapat menambahkan warna juga!
Kecuali Anda ubin gambar latar belakang Anda di seluruh halaman, Anda akan ditinggalkan dengan daerah putih kosong. Untuk mengisi bidang ini dengan warna pilihan Anda, Anda juga harus menambahkan warna pada properti background.
Jika Anda sudah memiliki "$ bgcolor" variabel dalam template blog Anda, Anda hanya dapat menambahkan variabel ini ke properti latar belakang, seperti ini:
background: $ bgcolor url (http://imagehost.com/yourimage.jpg) repeat-x;
Namun, jika Anda tidak memiliki variabel ini dalam template Anda, atau malah lebih memilih untuk menyatakan warna sendiri, Anda dapat melakukannya dengan menggunakan nilai Hex untuk warna yang Anda ingin ditampilkan. Ada sebuah kalkulator warna berguna dalam bagian alat yang dapat menghasilkan nilai-nilai hex membutuhkan. Berikut adalah contoh bagaimana Anda dapat mendeklarasikan nilai hex untuk warna di latar belakang Anda:
background: # ff0000 url (http://imagehost.com/yourimage.jpg) repeat-x;
Menggunakan gambar pertama sebagai contoh, ini akan menghasilkan latar belakang seperti ini:
Untuk Posisi gambar latar belakang .
Secara default, gambar latar belakang akan mulai di pojok kiri atas halaman, terlepas dari bagaimana Anda ingin gambar latar belakang untuk mengulangi (atau tidak) di halaman. Namun, Anda dapat menentukan di mana Anda ingin gambar yang akan ditempatkan dengan menambahkan beberapa variabel tambahan untuk spesifikasi latar belakang.
Berikut adalah contoh dari properti latar belakang bldy untuk menunjukkan di mana Anda dapat menempatkan variabel posisi:
background: # ffff00 url (http://imagehost.com/yourimage.jpg) posisi-variabel-di sini tidak mengulangi-;
Dan di sini adalah daftar dari variabel posisi yang dapat anda gunakan:
kiri atas
atas pusat
kanan atas
tengah kiri
pusat pusat
kanan tengah
kiri bawah
bawah pusat
kanan bawah
Jika Anda ingin posisi gambar tetap pada bagian tengah atas halaman misalnya, Anda bisa menggunakan kode berikut:
latar belakang; url (http://imagehost.com/yourimage.jpg) tidak mengulang-top center;
Hal ini juga memungkinkan untuk mengatur posisi awal dari gambar latar belakang menggunakan persentase pada sumbu X atau Y, atau dengan menentukan jarak dalam pixel dari atas atau kiri halaman. Namun, ini bisa agak rumit, dan karena orang menggunakan browser yang berbeda banyak dan resolusi layar saat browsing internet, ini dapat menyebabkan masalah serius untuk desain blog! Jika Anda masih ingin tahu lebih banyak tentang ini, saya akan merekomendasikan membaca informasi pada halaman latar belakang CSS di W3 sekolah .
Saya harap tutorial ini telah membantu Anda memahami cara menggunakan gambar latar belakang dalam blog Anda, dan mencakup seluruh aspek dari bagaimana efek yang berbeda dapat dicapai.
Selamat Mencoba....
Happy Blogging
