Berkreasi dengan background fixed didalam amdhas blogazine themes

Membuat background tetap dikiri didalam grid fluid

Pada pembahasan sebelumnya kita telah belajar membuat grid fluid presentase didalam amdhas blogazine themes. Artikel ini akan melanjutkan tehnik background dengan posisi tetap didalam amdhas blogazine themes. Bagi yang ingin menerapkan silahkan download terlebih dahulu themes blogazine untuk wordpress yang sudah saya buat.

Anda pun bisa hanya mengambil source kode CSS grid fluid saja, namun alangkah baiknya jika bisa langsung di terapkan dalam themes wordpress tersebut. Oke, dasar pembentukan background yang tetap jika kita bisa memasukan kode CSS didalam body adalah seperti ini:

body{
background-image:url(Masukan url gambar di sini);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;
}

Tehnik CSS diatas adalah tehnik yang umum diberikan untuk membuat backgroun menjadi tetap posisinya, dalam artian background tidak akan berpindah ketika scroll di gulung. Tehnik di atas pun memberikan background di dalam body bukan di dalam grid.

Nah, bagaimana kalau di dalam grid kita berikan background yang tetap, sehingga kita bisa memberikan banyak background. Bisa puluhan bahkan ratusan background yang tetap.

Coba di baca artikel sebelumnya kalau masih bingung, karena kita akan mencoba memberikan tehnik yang sedikit berbeda di dalam amdhas blogazine themes. Nah, pada artikel sebelumnya kita sudah memahami formula dari grid tersebut, misal formulanya saya berikan di grid yang bernilai enam.

<section class="row">
<section class="enam">
<p>Misal isi postingan anda yang di
masukan dalam tag paragraph</p>
</section>
</section>

Jika anda memposting seperti itu didalam amdhas blogazine themes maka hasil akan membentuk satu kolom saja tanpa background. Nah, bagaimana jika kita berikan background di dalam grid tersebut?

Caranya adalah kita harus memberikan class lagi di dalam row, agar seluruh row mempunyai background namun jika hanya di grid saja maka di berikan di dalam grid bukan di row.

Misalkan saya akan memberikan bakground di row maka perhatikan kode <section class="row">. Lalu kita berikan tambahan class dalam kode tersebut, nama dari selector bebas anda buat dan berikan spasi, contoh:

<section class="row latar">

Seperti yang kita lihat bahwa saya menambahkan latar Yang nantinya di dalam CSS akan manjadi selector class. .latar Jadi jika di paparkan kode keseluruhannya seperti ini:

<section class="row latar">
<section class="enam">
<p>Misal isi postingan anda yang di
masukan dalam tag paragraph</p>
</section>
</section>

Nah sekarang tahapnya kita memberikan background yaitu didalam kode CSS dengan selector .latar CSS akan terbentuk seperti ini:

.latar{
background-image:url(Masukan url gambar di sini);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;
}

Jika sudah, silahkan berikan url gambarnya, lalu masukan dalam draft dan klik priview untuk melihat hasilnya. Nah, jika kita lihat hasilnya ,maka postingan akan terlihat di samping di atas background tersebut, untuk memecahkan masalah tersebut maka kita akan memberikan tehnik floating.

Di dialam default grid yang saya berikan masing-masing grid saya berikan float:left agar bisa menjadi di kanan maka kita harus memberikan menjadi float:right.

Namun kita harus memasukan class lagi di dalam grid, Oks..sekarang di dalam grid bukan di row. Misal terlihat gridnya adalah enam:

<section class="enam">

Itu berarti grid belum di tambahkan class, untuk menambahkannya kita cukup memberikan selector sesuai bahasa kita. Misal saya akan memberikan selectornya .tetap

<section class="enam tetap">

Binggo,,sekarang anda sudah mendapatkan selector CSS. Tugas selanjutnya anda memberikan floating, jadi di kode CSS seperti ini:

.tetap{
float:right
}

Untuk kode HTML jika di berikan berarti mempunyai tambahan class di dalam row dan grid itu sendiri. Jika anda ingn mencoba anda bisa memberikan kode HTML secara keseluruhan seperti ini:

<section class="row latar">
<section class="enam tetap">
<p>Misal isi postingan anda yang di
masukan dalam tag paragraph</p>
</section>
</section>

Itu adalah kode keseluruhan HTML dalam satu row saja, silahkan anda masukan dalam postingan di dasboard wordpress. Di themes amdhas blogazine, ingat..anda harus ,memposting di format HTML. Setelah itu masukan kode CSS di text area seperti dibawah ini:

.latar{
background-image:url(Masukan url gambar di sini);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;
}
.tetap{
float:right
}

Silahkan simpan untuk pratinjau dan hasilnya adalah gambar yang di berikan akan tetap. Anda jangan lupa untuk memasukan url gambar anda didalam background-image:url(Masukan url gambar di sini);.

Nah, sekarang kita akan lihat bagaimana bisa di kembangkan lagi gambar didalam grid. Coba ikuti dan perhatikan artikel di bawah ini: