Ketika men-desain halaman website, adakalanya Anda ingin menampilkan gambar menjadi background full screen memenuhi layar monitor Anda. Atau Anda ingin gambar background tersebut tampil setengah saja (memenuhi setengah screen). Show
Ada beberapa cara yang dapat Anda gunakan untuk membuat gambar background tampil full screen, yaitu menggunakan CSS ataupun jQuery. Namun pada tutorial ini kita akan membuat gambar background full screen dengan CSS. Berikut beberapa teknik yang dapat Anda gunakan untuk membuat gambar background full screen dengan CSS. Daftar Isi Teknik 1 – Background Full Screen dengan CSSCara ini cukup sederhana, pertama Anda cukup membuat tag HTML <div class="bg"></div> Perintah CSS yang digunakan untuk membuat background full screen ialah : body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; Demo Teknik 2 – Background Full ScreenUntuk teknik kedua, Anda dapat membuat background full screen dengan meletakkan gambar menjadi background pada tag html { background: url(background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Demo Teknik 3 – Background Full ScreenUntuk cara ini, background yang ditampilkan dapat mengubah ukurannya di berbagai browser secara otomatis. Juga menggunakan perintah body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;0 gambar background dapat diatur. img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { img.bg { left: 50%; margin-left: -512px; /* 50% */ } } Demo Baca juga : Teknik 4 – Background Full ScreenPerintah CSS lainnya yang dapat Anda gunakan untuk membuat background full screen ialah sebagai berikut : #bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } Demo Membuat Background Half ScreenSelain membuat background full screen, Anda juga dapat mengatur gambar menjadi background half screen (background setengah layar). Untuk membuat background half screen sangatlah mudah, Anda hanya cukup mengatur body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;1 dari gambar background menjadi body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;2. Berikut perintah CSS untuk membuat background half screen selengkapnya. body, html { height: 100%; } .bg { background-image: url("background.jpg"); height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; } Demo KesimpulanAda banyak teknik dan kombinasi perintah CSS yang dapat Anda gunakan untuk membuat background full screen. Dari tutorial diatas, silakan gunakan cara yang sesuai dengan kebutuhan Anda. Atau mungkin Anda memiliki kombinasi perintah CSS lainnya untuk membuat background full screen ?! Jika ada, silakan berbagi di kolom komentar. Untuk memudahkan dalam belajar, Anda dapat mendowload source code dari semua perintah CSS diatas disini Artikel ini merupakan artikel ke #06 dari seri Tutorial CSS Dasar untuk Pemula. Untuk yang sekiranya sudah memahami tentang properti background css, bisa lanjut ke materi berikutnya yaitu Font di CSS. Daftar Isi - Pemanasan - 6 Properti Dasar Background di CSS - Properti Background Color CSS - Perbedaan Opacity dan Alpha Channel - Properti Background Image CSS - Background Image dengan Gradasi Warna - Tips untuk Background Image - Properti Background Repeat CSS - Properti Background Position CSS - Properti Background Attachment CSS - Properti Background (Shorthand) CSS - Pendinginan - Referensi PemanasanBackground merupakan salah satu elemen terpenting dalam CSS. Dengannya kita dapat menentukan suatu website akan memiliki tampilan atau tema seperti apa nantinya. Secara default background halaman web pada browser berwarna putih, namun kita dapat mengubahnya dengan mudah menggunakan properti CSS yang bernama background. Namun properti untuk mengatur background tidak hanya satu, ada banyak sekali dengan masing-masing properti tersebut memiliki fungsi yang berbeda-beda. 6 Properti Dasar Background di CSSTercatat sedikitnya ada 10 properti yang berkaitan dengan background. Namun pada artikel ini, kita hanya akan belajar 6 properti diantaranya:
Properti Background Color CSSProperti background-color berfungsi untuk memberi warna latar pada halaman website. Nilai defaultnya adalah transparent. Untuk sintaksnya adalah sebagai berikut:
Kita juga dapat mengganti nilainya menggunakan berbagai format penulisan yang sudah kita pelajari pada artikel sebelumnya, seperti:
Contoh penerapan properti background-color dengan format nilai nama warna.
Hasilnya: KBackground ColorSedangkan jika ingin membuat warnanya lebih transparan ada dua cara, yaitu:
Opacity dan Alpha ChannelSebenarnya ruang warna RGB dan HSL juga bisa menggunakan properti opacity tanpa menambah alpha channel (RGBA dan HSLA), namun ada perbedaan hasil antara keduanya sehingga kita tidak bisa semuanya menggunakan properti opacity. Perbedaan Opacity dan Alpha ChannelBaik properti opacity atau pun alpha channel pada ruang warna RGBA dan HSLA, keduanya memiliki rentang nilai antara 0 – 1 atau 0% – 100% dalam bentuk persentase. Semakin mendekati 0 nilainya maka semakin transparan warnanya. Sedangkan bila semakin mendekati 1 nilainya maka semakin jelas warnanya. Terlepas dari keduanya memiliki format nilai yang sama, keduanya juga memiliki perbedaan. Ketika kita memutuskan menggunakan properti opacity maka child element pada elemen HTML terkait juga akan ikut menjadi transparan, ini termasuk teks di dalamnya. Background CSS: Properti OpacitySedangkan jika child element HTML tidak ingin ikut menjadi transparan, maka gunakan format penulisan ruang warna RGBA atau HSLA. Background CSS: Alpha ChannelJadi gunakan sesuai kebutuhan kalian. Properti Background Image CSSSelanjutnya untuk membuat latar belakang berupa gambar kita dapat menggunakan fungsi dari properti background-image.
Properti background-image memiliki beberapa bentuk nilai, salah satunya berupa url atau lokasi dari file gambar yang akan kita jadikan latar. Sedangkan untuk nilai defaultnya adalah none. Contoh penerapan properti background-image menggunakan url sebagai nilainya. Background Image CSSPada kode di atas berhubung gambar dan file HTML berada dalam satu folder maka langsung saja tulis nama filenya. Terdapat beberapa ekstensi gambar yang dapat kita jadikan background seperti JPG, PNG, SVG, WEBP, GIF, dan lain-lain. Catatan: jangan pernah menggunakan gambar yang dapat mengganggu keterbacaan teks pada website kalian. Background Image dengan Gradasi WarnaSelain dapat menggunakan gambar, properti background-image juga dapat membuat latar dengan menggabungkan beberapa warna atau biasa kita sebut dengan gradient atau gradasi warna.
Gunakan koma untuk memisahkan setiap warna. Background Image: Gradasi WarnaApakah hanya bisa menggunakan 2 warna? Tidak, kita bisa gunakan lebih dari itu. Tips untuk Propeti Background ImageProperti background-image juga bisa kita tulis bersamaan dengan background-color. Hal ini biasanya bertujuan sebagai alternatif ketika gambar pada background-image gagal dimuat.
Apakah hal tersebut wajib kita lakukan? Wajib, bila kita ingin halaman atau elemen HTML tertentu memiliki warna background selain putih. Bersifat opsional bila kita ingin background terkait berwarna apa adanya termasuk putih. Hal ini juga berlaku ketika nilainya merupakan gradasi warna seperti contoh sebelumnya, meskipun hasilnya sama-sama warna, tidak menutup kemungkinan bila terdapat web browser yang masih belum mendukung properti background-image dengan nilai gradasi warna.
Untuk urutan penulisannya terserah, boleh background-image dulu yang ditulis atau pun sebaliknya background-color dulu, yang pasti prioritas untuk ditampilkan pada halaman website adalah background-image. Properti Background Repeat CSSSecara default, ketika kita menggunakan gambar sebagai background, ia akan ditampilkan secara berulang dari kiri ke kanan secara horizontal dan vertikal hingga memenuhi seluruh tempat dari background suatu elemen. ilustrasi Background RepeatSehingga dalam beberapa kasus hal ini tidak diperlukan. Maka dari itu untuk mengatasinya, kita perlu menggunakan yang namanya properti background-repeat. Properti background-repeat memungkinkan kita untuk mengatur bagaimana background akan ditampilkan secara berulang. Untuk sintaksnya ada di bawah ini.
Penerapan background-repeat di css. 0Ada beberapa nilai yang dapat kita pakai dalam properti ini, namun di sini kita akan bahas 4 nilai yang penting, yaitu:
Agar lebih mudah memahami keempat nilai di atas silahkan lihat ilustrasi di bawah ini. Illustrasi Tiap Nilai Background RepeatProperti Background Position CSSSelanjutnya untuk mengatur posisi dari background kita bisa gunakan properti background-position. Untuk sintaksnya adalah sebagai berikut. 1Properti ini secara default bisa menampung hingga 4 nilai namun dalam artikel ini kita akan bahas penggunaan background-position hanya dengan satu dan dua nilai saja menggunakan format nilai berupa kata kunci. Properti background-position memiliki format penulisan nilai yang beragam antara lain:
Setiap nilainya dipisahkan dengan spasi. Sedangkan untuk nilai defaultnya adalah left top atau dalam bentuk persentase adalah x = 0%, y = 0%. Contoh penerapan background-position: 2Background PositionNilai dari properti background-position pada dasarnya mewakili horizontal (X) dan vertikal (Y) yang mana ketika kita isi suatu nilai dengan left atau right berarti kita sedang mendefinisikan sumbu X dan sebaliknya ketika kita isi nilainya dengan top atau bottom maka kita sedang mendefinisikan sumbu Y. Jangan pernah menulis nilainya dengan arah yang saling berlawanan misal left right atau bottom top. Karena ini tidak valid. Khusus nilai berupa keyword, untuk urutan penulisan nilainya boleh bolak-balik, misalnya right top atau top right, tidak jadi masalah karena browser sendiri yang akan menyesuaikannya dan hasilnya pun akan tetap sama. Selain itu, pada dasarnya kita juga dapat mendefinisikan properti background-position dengan hanya menuliskan satu nilai saja, yang mana ketika hal ini kita lakukan maka nilai yang kedua secara otomatis akan dianggap bernilai center, terlepas dari apapun nilai yang pertama. 3Untuk mengetahui masing-masing penerapan nilai, bisa lihat ilustrasi berikut. Ilustrasi Tiap Nilai Background PositionProperti Background Attachment CSSSetelah mengatur posisi background, sekarang kita coba untuk menetapkan posisinya, maksud menetapkan di sini adalah kita dapat menentukan apakah posisi gambar latar akan berada tetap di posisinya atau berpindah ketika kita gulir. Illustrasi Nilai Background AttachmentDalam kasus ini kita menggunakan properti background-attachment. Sintaks dari background-attachment adalah sebagai berikut: 4Setelah itu kita akan coba tes dengan dua nilai pada background-attachment, yang pertama adalah nilai scroll. 5Nilai scroll merupakan nilai default dari background-attachment. Nilai ini tidak akan membuat background ikut terbawa ketika kita gulir, alias ia akan tetap berada di posisi awalnya. Background Attachment: ScrollKedua nilai fixed. Nilai ini akan membuat background gambar ikut turun dan naik mengikuti arah gulir. 6Background Attachment: FixedProperti Background (Shorthand) CSSSebenarnya dalam CSS ada suatu teknik yang berguna untuk mempersingkat penulisan nilai dari beberapa properti yang sejenis. Teknik ini dinamakan shorthand. Sedangkan properti yang memiliki kemampuan ini biasa disebut shorthand property. Properti shorthand memungkinkan kita mendeklarasikan atau menetapkan banyak nilai dari beberapa properti yang berbeda ke dalam satu properti. Dengan syarat properti-properti tersebut masih satu tipe. 7Hanya beberapa properti saja yang memiliki kelebihan seperti ini, salah satunya adalah properti background. Jadi simpelnya, kita dapat menyederhanakan beberapa baris pendeklarasian beberapa properti seperti ini: 8menjadi seperti ini, hanya satu baris menggunakan background. 9Properti background menampung nilai-nilai dari properti keluarga background itu sendiri seperti:
Dalam penerapannya kita tidak wajib menulis semua nilai properti di atas secara lengkap, jika kita hanya butuh beberapa properti tulis saja nilainya sejumlah properti yang kita butuhkan. Sedangkan untuk yang tidak terdefinisi nantinya akan secara otomatis terisi nilai defaultnya. Misal kita tidak menyertakan nilai dari background-color, maka secara otomatis pada properti background akan ditetapkan nilai dari background-color sebagai transparent, yaitu nilai defaultnya. Selain itu, kita juga boleh menulis nilai masing-masing properti secara tidak urut, hanya saja perlu kita perhatikan lagi terutama pada properti yang memiliki lebih dari satu nilai misal background-properti, kita tidak boleh menulisnya secara terpisah seperti ini: 0Hal ini nantinya akan menyebabkan masalah pada keseluruhan blok deklarasi. Sehingga browser tidak akan menjalankannya karena dianggap tidak valid. Jadi kita harus menuliskannya secara berdampingan sebagaimana mestinya kita menulis nilai dari background-position. 1PendinginanHari ini kita selesai mempelajari banyak hal dasar mengenai properti background di CSS, mulai dari bagaimana membuatnya hingga mengaturnya. Lantas, materi apa yang akan kita pelajari pada artikel berikutnya? Materi yang akan kita pelajari pada artikel berikutnya adalah mengenai Font di CSS. Jadi sampai bertemu di artikel berikutnya! Apa itu background image CSS?background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.
Bagaimana cara menyisipkan gambar latar belakang Background image Dalam HTML?Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.
Apa tag yang tepat untuk menambahkan gambar latar?Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya.
Apa properti CSS yang digunakan untuk mengubah warna latar belakang?2. Background Color, adalah salah satu properti CSS yang digunakan untuk mengubah warna backround tiap elemen HTML.
|