Cara menggunakan background image bootstrap 4

Question

Cara Membuat Background Fullwidth dengan Bootstrap – Hallo semuanya, Trend website saat ini adalah menggunakan section untuk membuat tampilan website memiliki background penuh dari ujung kiri sampai ke ujung kanan, pada artikel kali ini saya akan membuat salah satu contoh dalam menggunakan konsep website fullwidth yang dipadukan dengan bootstrap 4. Baiklah, sekarang simak tutorial berikut.

Table of Contents Show

Background Warna
Background Image
Background Repeat
Menentukan Ukuran Background
Menggunakan Gambar SVG
Background Blur di CSS
Apa Selanjutnya?
Apa HTML yang benar untuk inserting background
Apa itu background
Berikut ini manakah class yang digunakan untuk membuat gambar thumbnail dengan bootstrap?

Membuat struktur HTML

Disini kita membuat struktur html dengan pembunkus paling luarnya adalah article, dimana nantinya tag article ini akan digunakan sebagai penerima background dari css, dilanjutkan dengan class container, yang berfungsi untuk membuat konten tetap berada di tengah. Contoh strukturnya akan seperti ini:

               Col
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.





               Col
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.





               Col
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.

Memberikan CSS

Sedikit berbeda dengan artikel saya sebelumnya, yang berjudul Cara Membuat Background Fullwidth dengan HTML CSS, dimana pada artikel tersebut kita menuliskan banyak baris css, sedangkan ketika kita menggunakan bootstrap tentu baris css yang kita butuhkan saat ini hanyalah untuk background saja, yaitu dengan baris kode dibawah ini

article{
background: lightgreen
}

Baiklah teman teman, demikian artikel kali ini yang membahas tentang cara membuat background fullwidth dengan bootstrap, saya rasa caranya cukup mudah, semoga bisa kalian jadikan referensi dalam membuat website ya, Terima kasih

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

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.

Apa HTML yang benar untuk inserting background

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

Apa itu background

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.