Belajar CSS Part 2 Membuat Background

Belajar CSS Part 2 Membuat Background

Assalamualaikum Wr. Wb.

PENGERTIAN

Background dapat diartikan sebagai latar belakang. Dalam arti lain background merupakan tampilan dari web yang berada paling belakang dalam sebuah web tersebut. Background di dalam CSS juga dapat diartikan sebagai latar belakang atau tampilan yang paling dalam di sebuah web. Di dalam CSS background terbagi menjadi beberapa bagian. 

• Background Color
• Background Image
• Background Repeat
• Background Position
• Background Attachment

Di atas merupakan jenis-jenis dari background, dan setiap background memiliki fungsi masing-masing. Pada kesempatan ini saya akan membahas tentang jenis-jenis background tersebut.

LATAR BELAKANG

Di dalam sebuah web yang perlu kita perhatikan yaitu tampilan dari web tersebut. Seorang pengunjung akan merasa tertarik pada sebuah web jika web tersebut memiliki tampilan yang indah dan juga menarik. Tampilan itu sendiri terdiri dari background, dan lain-lain. Background inilah yang nantinya akan mebuat sebuah web tersebut menjadi indah dan menarik.

MAKSUD & TUJUAN

Menjadikan sebuah website lebih hidup dan menarik.

Membuat tampilan website tersebut menjadi indah dan juga memiliki dan tarik yang tinggi.

ALAT & BAHAN

• Laptop/PC
• Text Editor
• Browser

LANGKAH KERJA

Sudah saya jelaskan di atas jenis-jenis dari background di dalam CSS. Baiklah kita mulai sekarang, langsung saja kita lihat penjelasan berikut.

• Background-Color

Dilihat dari namanya kita tahu bahwa fungsi dari properti ini yaitu mengubah warna background dalam sebuah website. Cara penulisannya dapat kita lihat dalam contoh berikut.

Nb : Dari gambar di atas untuk mengubah warna background dari webnya menggunakan element "body", kemudian untuk mengubah background judul headingnya menggunakan lement "h1", dan yang terakhir untuk mengubah background paragrapnya menggunakan element "p". 

Gambar di atas merupakan hasil dari background-color yang telah dibuat. Jika sudah kita lanjut ke dalam jenis yang lainnya.

• Background-Image

Background image ini berfungsi untuk memberikan latar belakang sebuah web dalam bentuk gambar yang kita inginkan. Di dalam CSS caranya cukup mudah tinggal memasukkan url atau alamat dari gambar tersebut ke dalam element Background-color. Untuk lebih jelasnya lihatlah contoh berikut.

Nb : Untuk url bisa diisi dengan url di suatu web maupun di dalam folder.

Gambar di atas merupakan hasil dari background-color yang terlah dibuat. Walaupun belum, tapi ini baru setengah jalan. Kita lanjutkan ke dalam fungsi yang selanjutnya.

• Background-Repeat

Background repeat ini berfungsi untuk mengatur tampilan gambar di dalam background sebuah web. Maksudnya properti ini berfungsi untuk mengatur gambar tersebut bisa ditampilkan secara horizontal, vertikal, posisi tunggal maupun di ulang-ulang. 

Contoh :

• Menampilkan background secara horizontal dengan perintah "background-repeat:repeat-x"

• Menampilkan background secara vertical "background-repeat:repeat-y"

Masukkan properti "background-repeat:repeat-y" ke dalam element body. Kemudian jalankan dan lihat hasilnya. 

Gambar di atas merupakan hasil dari tampilan background secara vertical. 

• Menampilkan background image secara berulang ulang "background-repeat:repeat"

Tambahkan pada element bodi dengan properti background-repeat:repeat untuk menampilkan gambar background secara berulang-ulang.

Gambar di atas merupakan hasil dari tampilan gambar background secara berulang-ulang.

• Menampilkan background image hanya tunggal "background-repeat:no-repeat"

• Background-Position

Di dalam CSS background, properti ini berfungsi untuk mengatur posisi gambar pada background. Maksudnya mengatur posisi dari gambar itu bisa di atas, kanan, kiri, bawah. 

Contoh :

• background-position:top (atas)

• background-position:right (kanan)

• background-position:left (kiri)

• background-position:bottom (bawah)

• Background-Attachment

Properti ini berfungsi untuk mengatur posisi background gambar saat di scroll. Posisi gambar tersebut bisa saja tetap maupun hilang saat discroll. Properti pada attribute ini ada dua, yaitu :

• background-attachment:fixed

Berfungsi untuk membuat gambar pada background tetap saat discroll.

Contoh:

Silahkan dicoba, Jika kurang paham bisa diulangi dan tetap istiqomah nanti lama kelamaan akan terbiasa. Cobalah belajar dari kekurangan anda :D

Syukron

Wassalamualaikum Wr. Wb.

Referensi

https://www.w3schools.com/