CSS Background, Cara Memodifikasi Latar Belakang Blog

Ini adalah penerapan CSS dasar untuk properti background. Saya harap kalian bisa cepat mengerti. Sebagai bahan praktek, Saya buat sebuah blog sederhana dengan background yang sangat miskin seperti ini:

Template dasar

Dalam tampilan tersebut tampak sebuah blog dengan latar belakang hijau. Untuk mengganti warna latar belakang, terkadang sebuah template sudah dilengkapi dengan variabel-variabel yang nantinya akan ditampilkan dalam halaman Perancang Template. Dari tempat itu kamu bisa dengan mudah menentukan warna latar belakang hanya dengan sekali klik:

Fitur Blogger: Template Designer

<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">

Tapi bagaimana jika templatemu ternyata tidak memiliki variabel tersebut? Satu-satunya jalan hanyalah dengan mengubah background secara manual, yaitu melalui halaman Edit HTML.

Untuk mengganti warna latar belakang melalui halaman Edit HTML, carilah sebuah grup kode yang tampak kurang lebih seperti ini:

body {
  margin:0;
  padding:0;
  border:0;
  text-align:center;
  color:$mainTextColor;
  background:#692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
  font-size:small;
}

Tidak usah pedulikan kode apa saja yang ada di dalamnya, cukup fokus pada selektor body {} dan properti background.

Coba perhatikan kode ini:

background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;

• #692 adalah warna background (aslinya #669922 tapi kode warnanya diringkas menjadi tiga digit angka).
• url(http://www.blogblog.com/moto_son/outerwrap.gif) adalah background image berupa potongan gambar yang jika ditampilkan akan terlihat seperti ini (klik!)
  Untuk menampilkan sebuah background image, caranya cukup dengan mengakses URL gambar tersebut.
• top center adalah posisi background. Dalam posisi horizontal (sumbu-X), background image tersebut ditempatkan rata atas atau top, sementara dalam posisi vertikal (sumbu-Y), background image tersebut ditempatkan rata tengah.
• repeat-y menunjukkan bahwa background tersebut akan diduplikasi secara vertikal mengikuti sumbu-Y. Cara ini digunakan untuk mengurangi besar gambar yang umumnya diterapkan dalam background image berupa gradient atau pattern.

Oke, sekarang kita mulai prakteknya. Kita tahu bahwa kode #692 merupakan warna hijau dalam blog kita. Jika kita ganti kode warna tersebut dengan #882222 misalnya, maka hasilnya akan menjadi seperti ini:

Modifikasi background warna

Sekarang kita coba untuk mengganti background imagenya. Ganti URL gambarnya dengan URL ini: http://2.bp.blogspot.com/-l0z0zMqI2_E/TgvtSDKcsoI/AAAAAAAAAVQ/YzrI83Qjcio/s1600/arsip.jpg lalu ganti kode repeat-y dengan repeat saja, sehingga background image akan diduplikasikan ke sumbu-X dan sumbu-Y seperti ini:

Modifikasi background image

Itu adalah sedikit cara untuk mengganti background image secara manual. Dan ingat, background image tersebut secara langsung diterapkan dalam latar belakang blog karena yang tadi kita utak-atik adalah format-format model yang berada di dalam selektor body {}. Jika kalian menerapkan praktek ini dalam selektor #outer-wrapper {} misalnya, maka kamu akan mendapatkan hasil seperti ini:

Selektor berbeda dan hasil yang berbeda

Saya mulai menulis tutorial CSS ini karena hari ini Saya mendapati seorang pembaca yang mengira bahwa template Saya ini adalah template hasil unduhan atau membeli dari sebuah situs. Padahal Saya mendesain template ini dengan memanfaatkan kerangka dari template Rounders bawaan dari Blogger.

Jika dilihat-lihat, memang masih tampak mirip kan?