Bagaimana cara menambahkan warna latar belakang di html?

Question

Mengubah warna latar belakang elemen HTML biasanya dilakukan dengan menggunakan CSS. Mengubah warna background juga bisa dilakukan dengan menggunakan javascript

Table of Contents Show

Warna latar belakang
Gambar latar belakang
Ulangi Latar Belakang
Menentukan Ukuran Latar Belakang
Menggunakan Gambar SVG
Buram Latar Belakang di CSS
Apa berikutnya?
Apa HTML yang benar untuk menyisipkan gambar latar belakang?
Perintah apa yang diberikan untuk menambahkan warna latar belakang?
Bagaimana cara mengubah warna latar belakang suatu bagian di situs web?
Tuliskan langkah-langkah mewarnai latar belakang gambar?

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

Apa HTML yang benar untuk menyisipkan gambar latar belakang?

Ketuk

di baris berikutnya. Ini adalah tag HTML untuk menambahkan gambar latar belakang ke halaman web. Ganti "[url gambar]" dengan lokasi URL asli dari gambar yang diinginkan.

Perintah apa yang diberikan untuk menambahkan warna latar belakang?

BODY command adalah perintah untuk membuat warna background pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan saat halaman tertutup, dan lain-lain sesuai dengan atribut yang diberikan.