Mengubah warna latar belakang elemen HTML biasanya dilakukan dengan menggunakan CSS. Mengubah warna background juga bisa dilakukan dengan menggunakan javascript
Berikut adalah contoh baris program dalam HTML
Ada elemen HTML dengan nama id "kotak"
Berikut adalah baris program untuk mengatur warna background dengan javascript
Pada baris program di atas, elemen dengan id "kotak" dipilih dan disimpan dalam variabel "id_a". Warna latar belakang kemudian diatur menggunakan properti style. warna latar belakang
Setelah kita mempelajari tentang properti color_ dan nilai warna yang valid di CSS, selanjutnya kita belajar tentang background
Seperti namanya, properti background berfungsi untuk memberikan background pada elemen tertentu
Jika Anda mencoba mengetikkan background_ pada kode CSS di Inspect Elements, maka beberapa saran properti yang terkait dengan background akan muncul
Setiap properti <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_3 memiliki fungsi yang berbeda
Ada dua cara kita memberikan background di CSS, yaitu dengan warna dan gambar. Memberikan latar belakang dengan gambar memerlukan beberapa properti tambahan untuk mengatur gambar
Itu sebabnya ada banyak properti CSS
Pada tutorial kali ini, kita akan membahas properti yang penting dan sering digunakan dalam membuat background
Mari kita mulai
Warna latar belakang
Untuk memberikan warna background, kita dapat memberikan nilai warna pada properti background seperti color range, hexa color code, function <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>5, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>6, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>7, dan seterusnya
Ayo coba langsung praktek
Buat file baru dengan nama <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_8, lalu isikan kodenya seperti ini
<html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background-color: violet; } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_
Jadi hasilnya
Elemen <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_9 berhasil menyetel warna latar belakang menjadi ungu
Oya, kita gunakan properti background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);_0 untuk memberi warna background. Bahkan, itu juga bisa dilakukan dengan properti background
Nilai yang kita berikan pada background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);0 adalah nama warnanya. Coba juga gunakan nilai warna lain seperti kode heksadesimal, fungsi <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>5, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>7, dan sebagainya
Contoh menggunakan kode heksadesimal
Kita telah mempelajari nilai warna pada materi sebelumnya
- tutorial css. Menggunakan Warna di CSS
Oke selanjutnya kita akan mencoba menggunakan background dengan warna gradasi
Pertama kita buat warna gradasinya di website. https. //csgradient. io/
Kemudian salin kode CSS gradien yang Anda dapatkan
dan ubah kode CSS dari contoh tadi menjadi seperti ini
<html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>
Jadi hasilnya
Mantap 👍, skrg backgroundnya pake warna gradasi
Oya, kenapa kita menggunakan dua properti background?
background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);_
Ini untuk antisipasi, jika browser tidak mendukung penggunaan warna gradasi, maka warna background yang digunakan adalah warna fungsi <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>5
Gambar latar belakang
Jika kita ingin menggunakan warna background gambar, maka kita dapat menggunakan properti background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);7 atau background saja
Format gambar yang didukung bisa. background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);_9, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>0, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>1, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>2, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>3, <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>4, dll
Intinya, selama format gambar bisa dibuka di web browser, bisa dijadikan background
Baiklah kalau begitu
Mari kita coba latihan menggunakan latar belakang gambar
Pertama silahkan download file gambarnya di Unsplash
- [Unduh Latar Belakang]
Unduh ukuran sedang
Sebenarnya, Anda bisa menggunakan apa saja. Tapi coba yang ukuran sedang, karena biasanya itu ukuran layar komputer dan handphone
Setelah Anda mengunduh, ubah nama menjadi <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>5 lalu taruh di folder dengan file HTML
Jika file <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_5 tidak berada di folder yang sama dengan file HTML, maka Anda dapat menulis alamat jalurnya di CSS
Setelah itu buat file HTML baru dengan nama <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>7 dengan isi sebagai berikut
<html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>
Dalam kode ini, kami memberikan latar belakang gambar untuk elemen <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> body { background-image: url('background.jpg'); } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>8 dan memberikan latar belakang putih transparan (50%) untuk elemen <html> <head> <title>Contoh Background Warna</title> <meta content=""> <style> header { background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>9
Jadi hasilnya
Coba perbesar dan perkecil jendela. atau coba perkecil
Ulangi Latar Belakang
Jika pada contoh sebelumnya kita zoom out, maka hasilnya akan seperti ini
Gambar latar belakang akan diulang. Jika Anda menggunakan ukuran gambar yang kecil, maka akan ditampilkan seperti itu
Bagaimana cara menghindari pengulangan?
Kita dapat menggunakan properti body { background-image: url('background.jpg'); background-repeat: no-repeat; }0. Properti ini memiliki beberapa nilai
- body { background-image: url('background.jpg'); background-repeat: no-repeat; }1 berarti mengulangi latar belakang pada sumbu body { background-image: url('background.jpg'); background-repeat: no-repeat; }2 saja;
- body { background-image: url('background.jpg'); background-repeat: no-repeat; }3 berarti mengulangi latar belakang pada sumbu body { background-image: url('background.jpg'); background-repeat: no-repeat; }4 saja;
- body { background-image: url('background.jpg'); background-repeat: no-repeat; }5 berarti tidak mengulangi latar belakang
Nah, kita bisa menggunakan body { background-image: url('background.jpg'); background-repeat: no-repeat; }_5 jika ingin background tidak terulang
Maka kode CSS akan menjadi seperti ini
body { background-image: url('background.jpg'); background-repeat: no-repeat; }
Jadi hasilnya
Latar belakang tidak akan terulang
Menentukan Ukuran Latar Belakang
Kita dapat menyesuaikan ukuran background dengan properti body { background-image: url('background.jpg'); background-repeat: no-repeat; }7, properti ini memiliki beberapa nilai yang valid
- body { background-image: url('background.jpg'); background-repeat: no-repeat; }8, body { background-image: url('background.jpg'); background-repeat: no-repeat; }9, body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }0, body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }1 pengukuran (tetap) dalam angka dan satuan, contoh body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }2, body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }3
- body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }4, body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }5 (dinamis) mengikuti tinggi dan lebar layar (view port);
- body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }6 (dinamis) mengikuti ukuran lebar elemen;
- body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }7 (dinamis) mengikuti lebar dan tinggi elemen;
Mari kita coba sebuah contoh
Ubah kode CSS background pada contoh sebelumnya menjadi seperti ini
body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }
Jadi hasilnya
Menggunakan Gambar SVG
SVG (Scaleable Vector Graphic) adalah format gambar vektor yang sudah menjadi standar di web saat ini
Berbeda dengan gambar bitmap (jpg, png, gif) yang ukurannya terbatas pada piksel. Kita dapat memperbesar ukuran vektor sebanyak yang kita mau, tanpa merusak kualitasnya
Nah, untuk latihan. kita akan menggunakan gambar vektor dari getwave. io
Silakan buat gambar vektor gelombang di sana, lalu unduh file SVG
Kemudian taruh di folder dengan HTML
Setelah itu buat file HTML baru dengan nama body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }8 dan isikan kodenya seperti ini
<html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>
Pada kode ini, kita tidak perlu menentukan ukuran background untuk file vektor. Ukuran yang digunakan adalah ukuran maksimal 100%. Tapi Anda juga bisa menentukan ukurannya, jika mau
Oke, sekarang coba buka di web browser
Jadi hasilnya
Wow. keren 😍
Buram Latar Belakang di CSS
Akhir-akhir ini banyak bermunculan konsep desain web dengan background blur. Konsep ini dikenal dengan desain morfologi kaca, karena bentuknya yang mirip dengan kaca
Nah, untuk membuat seperti ini, ada properti css baru bernama body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }9 untuk memberikan filter di latar belakang
Jika kita ingin memberikan filter blur, maka kita harus memberikan nilai dengan fungsi <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>0
Contoh
Buat file baru dengan nama <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>1 lalu isi dengan kode berikut
<html> <head> <title>Contoh Background Blur</title> <meta content=""> <style> body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; } header { background: rgba(255,255,225, 0.5); } article { background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); padding: 1rem; } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> <article> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum. </article> </body> </html>
Dalam contoh ini, kami memberikan efek filter buram (10px) untuk elemen latar belakang <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>2
Jadi hasilnya
Besar. 😍 keren
Selain efek <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_0, masih ada efek lainnya seperti
- <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_4 untuk efek kecerahan;
- <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_5 untuk efek kontras;
- <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_6 untuk efek bayangan;
- <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_7 untuk efek hitam putih;
- <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_8 untuk efek warna rona;
- <html> <head> <title>Contoh Background SVG</title> <meta content=""> <style> body { background-image: url('wave.svg'); background-repeat: no-repeat; } header { background: rgba(255,255,225, 0.5); } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> </body> </html>_9 untuk efek warna negatif;
- <html> <head> <title>Contoh Background Blur</title> <meta content=""> <style> body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; } header { background: rgba(255,255,225, 0.5); } article { background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); padding: 1rem; } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> <article> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum. </article> </body> </html>0 untuk efek transparan;
- <html> <head> <title>Contoh Background Blur</title> <meta content=""> <style> body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; } header { background: rgba(255,255,225, 0.5); } article { background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); padding: 1rem; } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> <article> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum. </article> </body> </html>_1 untuk efek saturasi warna;
- <html> <head> <title>Contoh Background Blur</title> <meta content=""> <style> body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; } header { background: rgba(255,255,225, 0.5); } article { background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); padding: 1rem; } </style> </head> <body> <header> <h1>Belajar Background di CSS</h1> </header> <article> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum. </article> </body> </html>_2 untuk efek warna sepia
Silakan coba sendiri
Properti body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }_9 adalah properti baru yang belum masuk standar resmi CSS. Tidak semua browser mendukung properti ini. Anda dapat memeriksanya di caniuse. com/css-backdrop-filter
Apa berikutnya?
Oke, biar tutorial ini tidak terlalu panjang. kita berakhir di sini
Sebenarnya masih banyak lagi sifat-sifat yang berhubungan dengan background, terutama dalam penggunaan background gambar
Namun yang saya bahas pada tutorial kali ini adalah yang paling sering digunakan saat ini. Selebihnya, Anda bisa mencobanya sendiri