Mengenal Background CSS Secara Lengkap

Bagian yang wajib di design demi menghasilkan sebuah halaman web yang terlihat elegant adalah mengatur CSS pada property background pada template sodara. Oleh karena itu pada postingan kali ini saya akan menulis secara detail mengenai background pada CSS.

Seperti yang sodara ketahui bahwa background merupakan salah satu komponen desain yang cukup penting karena background digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten, baik berupa warna maupun gambar.

Supaya memudahkan sodara untuk mengetahui lebih jauh tentang background pada CSS, saya akan mengenalkan beberapa property CSS yang dimiliki oleh background terlebih dahulu. Property-property ini berkaitan mengenai warna background, posisi background dan lain-lain. Lebih jelasnya bisa lihat tabel ini.

PropertyFungsi
background-color Untuk menentukan warna latar belakang sebuah elemen html.
background-image Untuk menjadi gambar sebagai latar belakang dokumen html atau elemen html.
background-repeat Untuk mengatur kontrol pengulangan pada background gambar.
background-position Untuk mengatur kontrol posisi pada background gambar.
background-attachment Untuk mengatur kontrol scrolling pada background gambar.
background-size Untuk mengatur kontrol ukuran pada background gambar.
background Property singkat untuk menentukan sebuah background elemen yang mewakili beberapa property background lainnya dengan pemberian value secara bersamaan.

Beberapa property yang ada di tabel, akan saya bahas secara lengkap terutama tentang bagaimana cara menerapkan property tersebut. Seperti biasa, saya akan membuat dokumen HTMLnya terlebih dahulu agar sodara mudah memahami dengan apa yang saya tulis dipostingan ini. Untuk contohnya saya memiliki HTML seperti ini.


<div class='contoh-background'>

<strong>Ican Al Ihsan</strong>

</div>

Dengan dokumen HTML diatas, saya akan memberikan sentuhan CSS pada selector .contoh-background terutama pada property background, tetapi demi kerapihan pada tampilan selector tersebut saya akan memberikan property pendukung agar tampilannya terkesan rapih. Meskipun demikian, diharapkan sodara agar tetap fokus pada property background

Property background-color

Seperti yang sudah sodara lihat pada tabel, bahwa property ini memiliki fungsi untuk menentukan warna latar belakang sebuah elemen html. Dan sodara cukup memberikan value warna pada property tersebut sesuai dengan keinginan warna sodara, contohnya disini saya ingin membuat warna biru muda dengan kode #00aaff yang saya singkat menjadi #0af


.contoh-background{ background-color:#0af;
                   
                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Dengan sentuhan CSS diatas, maka hasil tampilan dari dokumen HTML yang sudah saya buat akan menjadi seperti ini

Ican Al Ihsan
Property background-image

Property ini biasanya digunakan untuk menampilkan Gambar menjadi latar belakang sebuah elemen html. Sebenarnya Property ini juga sering digunakan untuk membuat background warna-warni yang biasa disebut gradient. Saya akan tetap memberikan contoh background gradient pada penjelasan ini, tetapi untuk postingan kali ini saya akan menggunakan gambar sebagai bahan contoh pada dokumen HTML yang sudah dibuat sebelumnya. Jadi bisa dikatakan gradient dalam postingan ini hanya sebatas numpang lewat doang karena nanti saya akan menjelaskan lebih lengkap mengenai background gradient.

Background Gradient

Disini saya akan menambahkan CSS gradient yang mengkombinasikan biru muda dengan biru tua tanpa menghilangkan property-property yang sudah saya gunakan sebelumnya dan ini berlaku sampai contoh terakhir pada postingan ini


.contoh-background{ background-color:#0af;
                    background-image:linear-gradient(#0af,#00f);


                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Untuk hasilnya seperti ini

Ican Al Ihsan

Background Gambar

Setelah sodara mengetahui sedikit mengenai background gradient yang memanfaatkan dari property background-image. Sekarang saya akan memanfaatkan property tersebut dengan gambar dari url yang tersedia.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);


                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Sentuhan CSS diatas saya menambahkan gambar papan catur yang ukuran gambarnya sebesar 50px. Dan hasil dari CSS tersebut akan seperti ini.

Ican Al Ihsan
Property background-repeat

Ketika sodara menentukan sebuah gambar pada property background-image, maka gambar tersebut akan otomatis mengulang atau menjadi banyak, hal tersebut karena untuk menutupi seluruh tampilan halaman elemen yang bersangkutan, dalam property background-repeat ini sodara dapat mengatur perulangan pada background gambar tersebut karena property background-repeat dalam CSS bisa dimanfaatkan untuk mengatur dan menambahkan gambar yang akan ditampilkan kedalam elemen HTML. Property ini memiliki 4 value yang bisa digunakan untuk mengatur suatu gambar yang akan saya jelaskan satu persatu pada bagian ini.

background-repeat:no-repeat

property background-repeat dengan value no-repeat didalam CSS memiliki fungsi agar gambar tidak diulang terus menerus, karena secara default property background-image akan secara otomatis menggunakan value repeat pada aturan background repeat. Lebih jelasnya sodara bisa lihat contoh diatas, dimana gambar catur tersebut tidak disertakan background-repeat tetapi gambar tersebut secara otomatis muncul secara berulang-ulang padahal ukuran gambarnya sebesar 50px. Oleh karena itu, untuk menampilkan gambar single sodara cukup menambahkan value no-repeat pada property tersebut agar gambarnya tidak muncul secara berulang-ulang. Oke supaya lebih jelasnya, sodara perhatikan contoh dibawah ini.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:no-repeat;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Untuk hasilnya bisa dilihat sendiri, dimana gambar pada background tersebut tampil dengan ukuran aslinya sebesar 50px, beda dengan tampilan gambar pada bab background-image diatas yang tampil secara berulang-ulang.

Ican Al Ihsan

background-repeat:repeat

background-repeat dengan value repeat didalam CSS sebenarnya memiliki value bawaan pada background-repeat, dimana dengan value ini background yang diatur akan mengulang terus menerus baik secara horizontal maupun vertical.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:repeat;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Hasilnya akan sama seperti pada bab background-image yang sudah dijelaskan sebelumnya

Ican Al Ihsan

background-repeat:repeat-x

Jika sodara mengatur CSS pada property background-repeat dengan value repeat-x, maka akan menghasilkan gambar dengan mengulang terus menerus secara horizontal yaitu dari kiri ke kanan.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:repeat-x;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Dengan menerapkan value tersebut, maka tampilan gambar catur akan berulang secara horizontal yaitu dari kiri ke kanan

Ican Al Ihsan

background-repeat:repeat-y

Jika sodara mengatur CSS pada property background-repeat dengan value repeat-y, maka akan menghasilkan gambar dengan mengulang terus menerus secara vertikal yaitu dari atas ke bawah.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:repeat-y;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Dengan menerapkan value tersebut, maka tampilan gambar catur akan berulang secara vertikal yaitu dari atas ke bawah.

Ican Al Ihsan
Property background-position

Sesuai dengan namanya, property ini fungsinya untuk mengatur posisi gambar yang ada pada background. Untuk mengaturnya bisa di isi dengan value pixel atau dengan menggunakan satuan ukuran lainnya. Disini saya akan memberikan contoh dengan value pixel dan property background-repeat dengan value no-repeat.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:no-repeat;
                    background-position:20px 70px;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Hasilnya.

Ican Al Ihsan

Coba perhatikan value pada property background-position.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:no-repeat;
                    background-position:right bottom;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Hasilnya.

Ican Al Ihsan

Coba perhatikan value pada property background-position.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:no-repeat;
                    background-position:center;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Hasilnya.

Ican Al Ihsan
Property background-attachment

Background attachment property biasanya digunakan untuk pemasangan background image pada body. Background image yang digunakan bisa dibuat dalam bentuk berulang/repeat atau tunggal/tak berulang/no-repeat. Pada umumnya background attachment lebih banyak menggunakan background tunggal dengan ukuran besar yang memenuhi halaman web, tetapi disini saya akan memberikan contoh dengan gambar seperti yang diatas.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:no-repeat;
                    background-position:center;
                    background-attachment: fixed;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Hasilnya akan seperti dibawah ini, dimana ketika sodara scroll halaman web maka posisi akan tetap berada ditengah karena hasil dibawah sudah diatur pada property attachment berupa value fixed.

Ican Al Ihsan
Property background-size

Property background-size memiliki fungsi untuk mengatur ukuran background image pada css, dan dengan property background-size juga dapat menjadikan sebuah gambar background menjadi fullscreen atau full ukuran layar monitor, coba perhatikan contoh dibawah ini.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:no-repeat;
                    background-position:right bottom;
                    background-size:100px 20px;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Sodara bisa melihat value dari property background-size, dimana value pertama 100px untuk mengatur lebar dan value yang kedua 20px untuk mengatur tinggi background yang diinginkan. Dan hasilnya seperti ini.

Ican Al Ihsan

Jika sodara ingin mengatur ukuran gambarnya full-screen, maka sodara cukup beri value cover pada property background-size.


.contoh-background{ background-color:#0af;
                    background-image:url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg);
                    background-repeat:no-repeat;
                    background-position:center;
                    background-size:cover;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Hasilnya.

Ican Al Ihsan
Property background

Property background ini biasanya disebut dengan property singkat karena dengan property ini, sodara bisa mengatur warna, gambar, repeat, dan posisi background. Disini saya akan mengatur CSS sama seperti yang ada diatas bedanya disini saya akan menggunakan property singkat seperti yang ada dibawah ini.


.contoh-background{ background:#0af url(https://raw.githubusercontent.com/icanalihsan/Picture/master/catur-kecil.jpg)no-repeat center;
                    background-size:cover;

                   width:300px;
                   height:150px;
                   text-align:center;
                   text-transform:uppercase;
                   line-height:150px;
                   margin:0 auto;
                   color:#fff;
}

Hasilnya akan sama persis dengan hasil diatas.

Ican Al Ihsan

Sampai pada tahap ini, seharusnya sodara sudah mengerti dan memahami tentang background yang ada pada aturan CSS. Oleh karena itu tulisan mengenai CSS dalam postingan ini sekiranya sudah saya anggap lebih dari cukup untuk sodara yang sedang mengetahui lebih dalam mengenai background pada CSS. Semoga dengan adanya postingan ini dapat membantu sodara dalam memahami CSS terutama pada property background.

Comments