Apa tag html untuk mengubah warna background?

Question

Setelah kita belajar tentang properti color dan nilai-nilai warna yang valid di CSS, berikutnya kita pelajari tentang background.

Table of Contents Show

Background Warna
Background Image
Background Repeat
Menentukan Ukuran Background
Menggunakan Gambar SVG
Background Blur di CSS
Apa Selanjutnya?
Bagaimana merubah warna background?
Perintah apa yang diberikan untuk menambahkan background warna?
Bagaimana cara mengubah warna background halaman web?
Apa itu kode warna HTML?

Seperti namanya, properti background fungsinya untuk memberikan background pada elemen tertentu.

Jika kamu coba ketik background pada kode CSS di Inspect Elemen, maka akan muncul beberapa saran properti yang berkaitan dengan background.

Masing-masing 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 punya fungsi yang berbeda-beda.

Ada dua cara kita memberikan background di CSS, yakni dengan warna dan gambar. Permberian background dengan gambar membutuhkan beberapa properti tambahan lagi untuk mengatur gambarnya.

Itu sebabnya ada banyak 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>

4 si CSS.

Pada tutorial ini, kita akan membahas properti-properti yang penting dan sering digunakan dalam membuat background.

Mari kita mulai..

Background Warna

Untuk memberikan background warna, kita bisa memberikan nilai warna pada properti background seperti ranam warna, kode heksa 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,

<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 sebagainya.

Mari kita langsung coba praktik.

Buatlah 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, kemduian isi 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>

Maka 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 kita set warna latarnya menjadi violet.

Oya, kita menggunakan properti

background: rgb(34,193,195);
background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);

0 untuk memberikan warna latar. Sebenarnya bisa juga dengan properti background saja.

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 berupa nama warna. Silahkan coba juga gunakan nilai warna yang lain seperti kode heksa, 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 heksa:

Nilai warna sudah kita pelajari di materi sebelumnya:

Tutorial CSS: Menggunakan Warna di CSS

Oke, selanjutnya kita akan coba menggunakan background dengan warna gradasi.

Pertama kita buat dulu warna gradasinya di website: https://cssgradient.io/

Kemudian copy kode CSS gradient yang kamu dapatkan.

..dan ubah kode CSS contoh yang 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>

Maka hasilnya:

Mantap 👍, sekarang backgroud-nya pakai warna gradasi.

Oya, mengapa 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 menggunakan warna gradasi, maka warna background yang dipakai adalah warna dari 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.

Background Image

Jika ingin menggunakan warna latar gambar, maka kita bisa 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 tersebut bisa dibuka di web browser, maka bisa dipakai sebagai background.

Oke, kalau begitu..

Mari kita coba latihan menggunakan background gambar.

Pertama silahkan download file gambarnya di Unsplash:

[ Download Background].

Download yang ukuran medium.

Sebenarnya bisa pakai yang mana aja. Tapi kita coba ukuran medium, karena bisanya ukuran layar komputer dan Hp segitu.

Setelah kamu download, ubah namanya 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 kemudian taruh di satu folder dengan file HTML-nya.

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 satu folder dengan File HTML, maka nanti kamu bisa tulis alamat path-nya 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>

Pada kode ini, kita memberikan background 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 background 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.

Maka hasilnya:

Coba perbesar dan perkecil ukuran jendelanya.. atau coba juga melakukan zoom out.

Background Repeat

Jika kita melakukan zoom out pada contoh yang tadi, maka hasilnya akan seperti ini:

Gambar background-nya akan diulang-ulang. Jika kamu pakai ukuran gambar yang kecil, maka akan ditampilkan seperti itu.

Gimana cara agar tidak diulang-ulang?

Kita bisa gunakan properti

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

0. Properti ini punya beberapa nilai:

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

1 artinya mengulang background pada sumbu

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

2 aja;

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

3 artinya mengulang background pada sumbu

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

4 aja;

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

5 artinya tidak mengulang background.

Nah, kita bisa pakai

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

5 bila ingin background-nya tidak diulang.

Maka kode CSS-nya akan menjadi seperti ini:

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

Maka hasilnya:

Background tidak akan diulang.

Menentukan Ukuran Background

Kita bisa mengatur ukuran background dengan properti

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

7, properti ini punya 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 (fixed) ukuran 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 (dynamic) mengikuti ukuran tinggi dan lebar layar (view port);

body {
	background-image: url('background.jpg');
 	background-repeat: no-repeat;
  background-size: cover;
}

6 (dynamic) mengikuti ukuran lebar elemen;

body {
	background-image: url('background.jpg');
 	background-repeat: no-repeat;
  background-size: cover;
}

7 (dynamic) mengikuti ukuran lebar dan tinggi elemen;

Mari kita coba contohnya.

Ubahlah kode CSS background pada contoh sebelumnya menjadi seperti ini:

body {
	background-image: url('background.jpg');
 	background-repeat: no-repeat;
  background-size: cover;
}

Maka hasilnya:

Menggunakan Gambar SVG

Gambar SVG (Scaleable Vector Graphic) merupakan format gambar vektor yang menjadi standar di web saat ini.

Tidak seperti gambar bitmap (jpg, png, gif) yang ukurannya dibatasi dengan piksel. Vektor bisa kita perbesar ukurannya berapapun yang kita mau, tanpa merusak kualitasnya.

Nah, untuk latihan.. kita akan menggunakan gambar vektor dari getwave.io.

Silahkan buat gambar vektor wave di sana, kemudian download file SVG-nya.

Kemudian taruh di satu folder dengan HTML-nya.

Setelah itu, buat file HTML baru dengan nama

body {
	background-image: url('background.jpg');
 	background-repeat: no-repeat;
  background-size: cover;
}

8 dan isi 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 dipakai adalah ukuran maksimal 100%. Tapi kamu juga bisa menentukan ukurannya, jika mau.

Oke, sekarang coba buka di web browser.

Maka hasilnya:

Woaw.. keren 😍.

Background Blur di CSS

Belakangan ini banyak konsep desain web dengan background blur. Konsep ini dikenal dengan glass morphology design, karena bentuknya mirip seperti glass.

Nah untuk membuat yang seperti ini, ada properti css baru bernama

body {
	background-image: url('background.jpg');
 	background-repeat: no-repeat;
  background-size: cover;
}

9 untuk memberikan filter pada background.

Jika 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:

Buatlah 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 kemudian, 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>

Pada contoh ini, kita memberikan efek filter blur (10px) untuk background elemen

<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.

Maka hasilnya:

Mantap.. 😍 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 lagi 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 hue;

<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 sturasi 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.

Silahkan kamu coba-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. Kamu bisa mengeceknya di caniuse.com/css-backdrop-filter.

Apa Selanjutnya?

Oke, biar tutorial ini tidak terlalu panjang.. kita akhiri sampai di sini.

Sebenarnya masih banyak lagi properti yang berkaitan tentang background, terutama dalam menggunakan background gambar.

Namun, yang saya bahas di tutorial ini adalah yang paling sering dipakai saati ni. Sisanya, kamu bisa coba-coba sendiri.

Bagaimana merubah warna background?

Masuk ke Desain > Warna Halaman. Pilih warna yang Anda inginkan. Jika Anda tidak melihat warna yang Anda inginkan, pilih Warna Lainnya lalu pilih warna dari setiap opsi di kotak Warna.

Perintah apa yang diberikan untuk menambahkan background warna?

Perintah BODY adalah perintah untuk membuat warna latar belakang pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan atribut yang diberikan.

Bagaimana cara mengubah warna background halaman web?

Cara Mengubah Warna Background Website WordPress.

Pilih menu Appearance > Customize..

Pilih menu Colors (Jika tidak ada, bisa cari background, background color, dll).

Klik tulisan background color (Jika tidak ada juga, coba cara yang berikutnya).

Pilih warnanya..

Klik tombol Publish..

Apa itu kode warna HTML?

Apa sih yang dimaksud dengan kode warna HTML? Kode warna HTML (Hypertext Markup Language) ditandai dengan enam karakter setelah tagar (#), misalnya #000000. Warna HTML diatur dengan menggunakan kode HEX yang merupakan gagasan heksadesimal dari RGB.

kode html