CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa desain yang sederhana namun kuat yang memiliki kemampuan untuk mengubah halaman web. Secara sederhana, ini menyederhanakan proses pembuatan halaman web yang rapi dan menarik bagi pengguna dengan bantuan . Pada artikel ini, kita akan memahami bagaimana menerapkan berbagai gambar latar belakang di CSS dengan urutan sebagai berikut:
- Gambar Latar Belakang di Properti CSS
- Gambar Latar Belakang di CSS
- Ulangi Latar Belakang
- Lampiran Latar Belakang
- Posisi Latar Belakang
- Gambar Latar Belakang dalam Ukuran CSS
- Warna latar belakang
Gambar Latar Belakang di Properti CSS
Ada banyak properti yang digunakan untuk mengontrol perilaku dan pemosisian gambar. Properti ini adalah:
- gambar latar belakang
- ulangi latar belakang
- background-attachment
- background-position
- background-size
- warna latar belakang
Kami akan membiasakan diri dengan masing-masing properti ini dan melihat kapan dan bagaimana menggunakannya dengan beberapa demonstrasi yang menarik.
Gambar Latar Belakang di CSS
Itu gambar latar belakang properti seperti namanya hanya digunakan untuk menunjukkan dan mengatur gambar latar belakang melalui elemen di halaman web. Sebuah gambar latar belakang secara default ditempatkan di sudut kiri atas sebuah elemen.
sintaksis: background-image: url | none | linear-gradient | radial-gradient
tubuh {background-image: url ('apple.jpg')}background menggunakan url
Mari kita pahami parameternya:
- url: Masukan ke parameter ini memungkinkan kita menentukan jalur file ke gambar apa pun atau URL ke gambar yang perlu disetel sebagai latar belakang. Untuk mendeklarasikan lebih dari satu gambar, Url dipisahkan dengan pemisah koma.
tubuh {background-image: url ('apple.jpg')} 
- tidak ada: Ini adalah nilai default properti dan tidak ada gambar latar yang dirender jika nilainya ditentukan.
body {background: none}- gradien linier (): Gambar latar belakang disetel ke gradien linier. Minimal dua warna harus ditentukan untuk properti ini, yaitu dari atas ke bawah.
body {background-color: # 001 background-image: gradien linier (putih 15%, transparan 16%), gradien linier (putih 15%, transparan 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- radial-gradien (): Gambar latar belakang disetel ke gradien radial. Minimal dua warna harus ditentukan untuk properti ini, yaitu dari tengah ke tepi.
body {background-color: # 001 background-image: radial-gradient (putih 15%, transparan 16%), radial-gradient (putih 15%, transparan 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- berulang-linier-gradien (): Ini mengulangi gradien linier. Mari kita gunakan contoh yang sama yang kita lihat di atas dalam gradien linier untuk mengulangi-linier-gradien dan melihat perbedaannya.
body {background-color: # 001 background-image: repeating-linear-gradient (putih 15%, transparan 16%), berulang-linier-gradien (putih 15%, transparan 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}- berulang-radial-gradien (): Ini mengulangi gradien radial. Mari kita jelajahi contoh yang sama yang kita gunakan di atas dalam gradien radial.
body {background-color: # 001 background-image: repeating-radial-gradient (putih 15%, transparan 16%), berulang-radial-gradien (putih 15%, transparan 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}Latar Belakang Penggantian
Sebagai tip profesional, selalu disarankan untuk menambahkan warna latar belakang sebagai opsi fallback. Itu datang untuk menyelamatkan terutama ketika gambar latar belakang tidak dimuat atau latar belakang gradien yang kami tetapkan saat mengembangkan tidak didukung oleh beberapa browser lama tempat itu dilihat.
Ini tidak merusak pengalaman pengguna dan dapat dinyatakan seperti ini:
body {background: url (apple_lost.jpg) pink}Beberapa Latar Belakang
Kami juga memiliki opsi untuk mengatur beberapa gambar latar belakang dan ini diperlukan dalam banyak kasus seperti gambar latar depan dan latar belakang. Urutan gambar penting di sini, gambar yang seharusnya berada di depan dinyatakan lebih dulu, dan gambar yang berada di belakang terakhir dideklarasikan berikutnya.
Di bawah ini adalah contoh untuk beberapa gambar latar belakang:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Ulangi Latar Belakang
Properti background-repeat digunakan bersama dengan background-image untuk menentukan perilaku pengulangan suatu gambar. Ini menentukan apakah dan bagaimana gambar latar belakang akan diulang. Gambar latar belakang secara default diulang baik secara vertikal maupun horizontal.
Nilai yang mungkin adalah:
- ulangi- Gambar berulang secara horizontal dan vertikal
- no-repeat - Gambar tidak berulang
- repeat-x - Gambar diulang secara horizontal
- repeat-y - Gambar diulang secara vertikal
- spasi- Gambar diulang dengan spasi atau celah yang rata.
- round - Gambar diulang untuk mengisi area tanpa celah di antara keduanya.
Sintaks CSS untuk properti background-repeat adalah:
background-repeat: ulangi | ulangi-x | ulangi-y | tanpa-ulang | spasi | bulat
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Lampiran Latar Belakang
Itu background-attachment properti digunakan bersama dengan gambar latar belakang untuk menyatakan apakah gambar harus di-scroll atau tidak saat konten di-scroll. Ini menandakan bahwa gambar latar belakang harus diperbaiki atau harus menggulir bersama dokumen dengan relatif terhadap tampilan jendela browser. Nilai defaultnya adalah menggulir.
Nilai yang mungkin adalah:
- scroll - Gambar bergulir bersama halaman.
- diperbaiki - Gambar tidak akan bergulir bersama halaman
Sintaks CSS untuk lampiran latar belakang adalah:
background-attachment: gulir | diperbaiki
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Posisi Latar Belakang
Itu background-position properti digunakan untuk menunjukkan lokasi atau posisi gambar latar belakang. Nilai yang mungkin adalah:
- puncak
- Baik
- bawah
- kiri
- pusat
- kombinasi dari nilai-nilai ini (misalnya, kiri atas)
Sintaks CSS untuk background-position adalah:
background-position: atas | kanan | kiri | bawah | tengah
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Gambar Latar Belakang dalam Ukuran CSS
Properti ini adalah salah satu yang paling berguna karena memungkinkan kita mengontrol ukuran gambar latar belakang. Ada kombinasi berbeda yang dapat kami terapkan dengan properti ini dan mendapatkan hasil yang sesuai. Nilai defaultnya adalah otomatis.
Nilai berikut dapat digunakan dengan ukuran latar belakang:
- mobil
- panjang- tinggi dan lebar gambar mis. 20px 40px.
- persentase- tinggi dan lebar gambar sebagai persentase w.r.t elemen induk mis. 50% 50%.
- center- Sejajarkan gambar ke tengah
- menutupi, menskalakan gambar agar sepenuhnya menutupi area latar belakang.
- berisi, menskalakan gambar agar pas hingga tinggi dan lebar aslinya.
Sintaks CSS untuk background-position adalah:
ukuran latar belakang: nilai
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contains, 400px 150px}Warna latar belakang
apa scipy di python
Ini yang paling sederhana dari semua properti di CSS yang berlaku. Ini menerapkan warna solid ke latar belakang halaman. Nilai properti ini dapat ditentukan dalam warna (misalnya merah, biru, dll), nilai hex dan nilai RGB.
Sintaks CSS untuk warna latar adalah:
warna latar belakang: nilai
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Ini menyimpulkan semua properti yang bisa kita gunakan dengan latar belakang. Kami selalu dapat mencoba berbagai kombinasi properti seperti yang kami lihat dalam demonstrasi kami.
CSS sangat penting dan harus memperoleh keterampilan untuk setiap pengembang web front-end. Ini membantu saat merancang dan menata latar belakang dan membangun situs web yang mengesankan dan memperkaya pengalaman pengguna. Yang terbaik adalah terus bereksperimen dan memanfaatkan sepenuhnya teknologi front-end khusus ini karena dapat melakukan keajaiban dan mengubah halaman secara dinamis.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar di blog 'Gambar latar belakang dalam CSS' dan kami akan menghubungi Anda kembali.