Membuat Gambar Background Responsive Menggunakan CSS

Setelah sebelumnya saya berbagi tutorial tentang Membuat Gambar Responsive Menggunakan CSS, pada kesempatan kali ini saya akan membahas masih tentang gambar, yaitu Gambar Backgroud responsive.

Tentunya dalam sebuah situs, gambar background dapat membuat situs atau website yang kita buat menjadi lebih menarik untuk dikunjungi kembali oleh para pengunjung. Nah, untuk zaman sekarang yang serba responsive, kita tentunya perlu membuat gambar background situs kita juga responsive agar enak dilihat.

Untuk membuat gambar background yang responsive, kita hanya perlu sedikit ngetik coding CSS saja, seperti berikut ini :

Jadi, gambar yang kita gunakan sebagai background kita sisipkan ke dalam coding cssnya, lalu kita beri beberapa perintah seperti :

• background-repeat:no-repeat; agar gambar tidak dimunculkan berulang ulang. 
• background-size:cover; agar gambar yang kita gunakan sebagai background bisa tetap mengikuti ukuran layar atau menjadi responsive.

So, mudah sekali bukan? Bila ada pertanyaan, silahkan kalian tulis di kolom komentar dibawah dan semoga postingan kali ini dapat bermanfaat untuk kalian!

Membuat Gambar Responsive Menggunakan CSS

Gambar merupakan salah satu bagian penting pada sebuah website. Gambar yang ada di website memiliki peran seperti sebagai ilustrasi, penjelas, dsb agar pengunjung dapat lebih mudah dalam memahami apa yang ingin disampaikan oleh penulis.

Namun, gambar yang ada di situs kadang sulit di atur dan tidak bisa menyeusaikan dengan tampilan yang sudah kita tetapkan. Nah, oleh karena itu disini saya ingin berbagi dengan kalian tentang cara membuat gambar yang kita sisipkan bisa menyesuaikan dengan tampilan yang telah kita buat.

Untuk mengatur gambar tersebut menggunakan CSS, kita hanya perlu mengetikkan coding CSS yang pendek. Codingnya adalah seperti berikut ini :

Mudah banget bukan? Nah, sekarang gambar-gambar kalian bisa lebih mudah di atur nih berkat coding pendek diatas. Kayanya gak perlu deh tanya-tanya nih di kolom komentar. So, Semoga Bermanfaat ya!

Membuat Layout 2 Kolom dan 3 Kolom Menggunakan CSS

Melanjutkan pembahasan saya di postingan sebelumnya tentang Membuat Layout Website Menggunakan CSS, postingan saya kali ini membahas tentang membuat layout 2 kolom dan layout 3 kolom menggunakan CSS.

Seperti yang kita tahu, pada umumnya, sebuah website setidaknya harus memiliki 2 kolom untuk bagian Main Content, satu sisi untuk konten utama website tersebut seperti artikel, halaman, dsb dan satunya lagi sebagai sidebar untuk penempatan widget dan iklan.

Untuk membuat Layout 2 kolom, sebelumnya kita harus ngetik coding HTML dahulu sebagai dasarnya yang bisa kalian sisipkan ke dalam Container layout website sobat seperti berikut :

Setelah itu, kita masuk pada proses ngetik coding CSSnya, kita akan membuat class content-kanan dan content-kiri berdampingan menggunakan sedikit coding CSS yang mudah.

Pada CSS dari class content-kiri, kita berikan float:left; agar objeknya menempel ke bagian kiri, lalu diberikan position:absolute;. Setelah itu pada content-kanan kita berikan position:absolute; juga agar mengisi bagian yang kosong dari content-kiri sehingga hasilnya mereka berdua dapat berdampingan.

Mudah bukan? Nah, untuk membuat 3 kolom, kalian tinggal tambahkan saja satu bagian lagi menjadi class content-kiri, content-tengah, dan content-kanan lalu kalian atur lebarnya sesuai kebutuhan kalian dan jangan lupa kasih float:left; untuk content-kiri dan position:absolute; untuk semua class.

Semoga bermanfaat! Kalau masih bingung, jangan sungkan-sungkan untuk bertanya di kolom komentar di bawah ya...

Membuat Layout Website Menggunakan CSS

Sebuah website bisa kita bagi menjadi 4 bagian utama yaitu Header, Menu, Content dan Footer. Setiap bagian utama website tersebut harus ada dan bisa kita atur penempatannya dengan berbagai desain, namun pada umumnya desain layout adalah seperti blog saya ini.

Untuk membuat sebuah layout website yang baik, kita bisa menggunakan CSS (Cascading Style Sheets). Dengan memanfaakan CSS kita bisa dengan mudah mengatur tampilan layout website yang akan kita buat.

Sebelum masuk ke proses ngetik coding CSS, kita perlu ngetik coding HTML nya terlebih dahulu, kira-kira seperti coding berikut :

Dilihat dari coding diatas, terdapat perintah <div></div> dengan class yang berbeda-beda, ini digunakan untuk membagi tiap bagian dari layout website yang nantinya dapat diatur menggunakan coding CSS.

Nah, setelah kita ngetik coding HTML diatas, sekarang kita tinggal ngetik coding CSS nya untuk mengatur container serta footer agar tetap berada di bawah. Codingnya seperti dibawah ini :

Coding CSS nya kok hanya mengatur class Container dan Footer saja? Iya, nantinya kalian bisa sisipkan bagian lain seperti Header, Menu,  Content, dan sejenisnya ke dalam Container yang sudah kita atur dengan CSS diatas.

Bagaimana? mudah bukan membuat layout website dengan CSS? Bila kalian masih bingung, silahkan berkomentar ya, nanti saya bantu.