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 halamanCara 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 atasatas 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....
Komentar
Posting Komentar
Mohon Komentar na ya trima kasih :)