NEW
Font size
WorksheetsTailwindCSS Background Image Pert-8
Total questions: 20
Worksheet time: 10mins
Bagaimana cara menambahkan gambar latar belakang menggunakan TailwindCSS?
Mengubah warna latar belakang elemen menjadi gambar.
Menambahkan class 'bg-[namaWarna]' pada elemen yang ingin diberi gambar latar belakang.
Menggunakan tag
Menambahkan class 'background-image-[namaGambar]' pada elemen yang ingin diberi gambar latar belakang.
Berikan contoh penggunaan background image pada class 'bg-cover'!
background-image: url('background.jpg');
background-image: url('gambar.jpg');
background: url('image.jpg') no-repeat center center fixed;
background-image: image.jpg;
Jelaskan perbedaan antara 'bg-fixed' dan 'bg-local' dalam konteks background image!
bg-scroll membuat gambar latar belakang tetap saat menggulir halaman
bg-fixed membuat gambar latar belakang tetap saat menggulir halaman, sedangkan bg-local membuat gambar latar belakang bergantung pada elemen HTML tempat gambar tersebut ditempatkan.
bg-fixed membuat gambar latar belakang bergantung pada elemen HTML tempat gambar tersebut ditempatkan
bg-local membuat gambar latar belakang tetap saat menggulir halaman
Apakah fungsi dari 'bg-no-repeat' dalam pengaturan background image?
Menyebabkan background image berkedip-kedip.
Membuat background image menjadi transparan.
Mengatur agar background image tidak diulang di dalam elemen HTML.
Mengubah warna background image menjadi hitam.
Bagaimana cara mengatur ukuran background image menggunakan TailwindCSS?
{ bg-cover: 'background-size: cover;', bg-contain: 'background-size: contain;', bg-top: 'background-position: top;', bg-bottom: 'background-position: bottom;', bg-center: 'background-position: center;', bg-left: 'background-position: left;', bg-right: 'background-position: right;', bg-auto: 'background-size: auto;' }
bg-middle: 'background-position: middle;',
bg-stretch: 'background-size: stretch;'
bg-fit: 'background-size: fit;',
Apakah yang dimaksud dengan 'bg-contain' dalam hal background image?
Nilai 'bg-cover' digunakan untuk memperkecil gambar latar belakang
Nilai 'bg-stretch' digunakan untuk memotong gambar latar belakang
Nilai 'bg-fit' digunakan untuk menampilkan gambar latar belakang tanpa proporsional
Nilai 'bg-contain' dalam CSS background image digunakan untuk memastikan bahwa gambar latar belakang akan ditampilkan secara proporsional di dalam elemen tanpa memotong atau memperbesar gambar.
Berikan contoh penggunaan 'bg-repeat' pada background image!
background-image: url('gambar.jpg'); background-repeat: repeat-x;
background-image: url('gambar.jpg'); background-repeat: no-repeat;
background-image: url('gambar.jpg'); background-repeat: repeat-y;
background-image: url('gambar.jpg'); background-repeat: repeat-xy;
Bagaimana cara membuat background image tetap di posisi tertentu saat scrolling menggunakan TailwindCSS?
Atur background-image ke 'fixed' dalam CSS biasa.
Gunakan class 'bg-fixed' dari TailwindCSS.
Tambahkan 'background-attachment: fixed;' dalam inline style.
Gunakan class 'bg-scroll' dari TailwindCSS.
Jelaskan pengertian dari 'bg-gradient-to-r' dalam TailwindCSS!
bg-gradient-to-r adalah untuk membuat gradien radial
bg-gradient-to-r digunakan untuk mengatur ukuran font
bg-gradient-to-r digunakan untuk membuat gradien linear dari kiri ke kanan.
bg-gradient-to-r berfungsi untuk mengatur margin
Kapan kita sebaiknya menggunakan 'bg-gradient-to-l' dalam styling background image?
Ketika ingin menerapkan gradient dari kiri ke kanan secara horizontal.
Ketika ingin menerapkan gradient dari atas ke bawah secara vertikal.
Ketika ingin menerapkan gradient dari kanan ke kiri secara horizontal.
Ketika ingin menerapkan gradient dari bawah ke atas secara vertikal.
Bagaimana cara menambahkan gradient background menggunakan TailwindCSS?
Pasang plugin khusus untuk gradient background pada TailwindCSS.
Tambahkan class 'bg-gradient-to-r from-blue-500 to-green-500' pada elemen HTML yang ingin diberi gradient background.
Gunakan inline CSS dengan property 'background: linear-gradient(blue, green);'.
Tambahkan class 'gradient-bg-blue-green' pada elemen HTML yang ingin diberi gradient background.
Apakah yang dimaksud dengan 'bg-gradient-to-t' dalam pengaturan background image?
bg-gradient-to-t means 'background gradient to table'
bg-gradient-to-t refers to 'background gradient towards top'
bg-gradient-to-t stands for 'background gradient to tail'
bg-gradient-to-t adalah singkatan dari 'background gradient to top'.
Kapan kita sebaiknya menggunakan 'bg-center' dalam styling background image?
Ketika ingin mengatur posisi tengah dari gambar latar belakang.
Ketika ingin mengatur posisi kanan dari gambar latar belakang.
Ketika ingin mengatur posisi kiri dari gambar latar belakang.
Ketika ingin mengatur posisi atas dari gambar latar belakang.
Apa yang dimaksud dengan 'bg-gradient-to-b' dalam pengaturan background image?
bg-gradient-to-b berarti 'background gradient to bottom'
bg-gradient-to-b mengacu pada 'background gradient towards bottom'
bg-gradient-to-b adalah singkatan dari 'background gradient to back'
bg-gradient-to-b adalah kependekan dari 'background gradient to bottom'.
Apa perbedaan antara 'bg-cover' dan 'bg-contain' dalam konteks background image?
bg-cover membuat gambar latar belakang tetap saat menggulir halaman, sedangkan bg-contain membuat gambar latar belakang memenuhi elemen tanpa memotong atau memperbesar gambar.
bg-cover membuat gambar latar belakang memenuhi elemen tanpa memotong atau memperbesar gambar, sedangkan bg-contain membuat gambar latar belakang tetap saat menggulir halaman.
bg-cover membuat gambar latar belakang bergerak saat menggulir halaman, sedangkan bg-contain membuat gambar latar belakang tetap di posisi tertentu.
bg-cover membuat gambar latar belakang bergerak saat menggulir halaman, sedangkan bg-contain membuat gambar latar belakang memenuhi elemen tanpa memotong atau memperbesar gambar.
Bagaimana cara menambahkan gradient background menggunakan TailwindCSS?
Pasang plugin khusus untuk gradient background pada TailwindCSS.
Tambahkan class 'bg-gradient-to-r from-blue-500 to-green-500' pada elemen HTML yang ingin diberi gradient background.
Gunakan inline CSS dengan property 'background: linear-gradient(blue, green);'.
Tambahkan class 'gradient-bg-blue-green' pada elemen HTML yang ingin diberi gradient background.
Kapan kita sebaiknya menggunakan 'bg-left' dalam styling background image?
Ketika ingin mengatur posisi kiri dari gambar latar belakang.
Ketika ingin mengatur posisi kanan dari gambar latar belakang.
Ketika ingin mengatur posisi atas dari gambar latar belakang.
Ketika ingin mengatur posisi tengah dari gambar latar belakang.
Apa perbedaan antara 'bg-center' dan 'bg-left' dalam konteks background image?
bg-center membuat gambar latar belakang tetap saat menggulir halaman, sedangkan bg-left membuat gambar latar belakang berada di posisi kiri.
bg-center membuat gambar latar belakang bergerak saat menggulir halaman, sedangkan bg-left membuat gambar latar belakang tetap di posisi kiri.
bg-center membuat gambar latar belakang memenuhi elemen tanpa memotong atau memperbesar gambar, sedangkan bg-left membuat gambar latar belakang berada di posisi kiri.
bg-center membuat gambar latar belakang bergerak saat menggulir halaman, sedangkan bg-left membuat gambar latar belakang berada di posisi kiri.
Kapan kita sebaiknya menggunakan 'bg-right' dalam styling background image?
Ketika ingin mengatur posisi kanan dari gambar latar belakang.
Ketika ingin mengatur posisi kiri dari gambar latar belakang.
Ketika ingin mengatur posisi atas dari gambar latar belakang.
Ketika ingin mengatur posisi tengah dari gambar latar belakang.
Kapan kita sebaiknya menggunakan 'bg-no-repeat' dalam styling background image?
Ketika ingin menampilkan gambar latar belakang hanya sekali tanpa pengulangan.
Ketika ingin mengatur gambar latar belakang agar selalu terlihat.
Ketika ingin mengatur gambar latar belakang agar terulang secara horizontal.
Ketika ingin mengatur gambar latar belakang agar terulang secara vertikal.
