Cara Membuat Efek Background Gambar dengan Warna

29/10/2017    Risman Hakim    1784     Website

Diantara kalian mungkin sudah sering membuat background sebuah web dengan gambar ataupun dengan background warna bahkan mungkin dengan kombinasi gambar dan warna, dengan memanfaatkan properties yang ada di CSS3 kita sangat dipermudah dalam membuat background seperti itu. Nah, mungkin diatara teman-teman sekalian ada yang masih belum tahu mengenai bagaimana cara membuat background seperti itu ? untuk itu saya akan sharing cara membuat background dengan gambar dikombinasikan dengan warna, sehingga akan menampilkan sebuah efek yang bagus. Baiklah simak tutorialnya berikut ini mengenai bagaimana cara membuat efek background gambar dengan gambar.

Pada kasus ini kita akan membuat background gambar, tentunya kalian wajib menyiapkan satu buah gambar sebagai objek backgroundnya, setelah itu barulah kita akan susun kode sebagai berikut. Silahkan ketikan HTML berikut ini.

<body>
    <div class="wrapper">
      <h1>DUMET.</h1>
    </div>
</body>

Setelah membuat kode HTML5 seperti diatas, selanjutnya kita akan membuat efek pada gambar dengan kode CSS3 berikut ini.

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  background-image: url(gambar.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.wrapper::after, .wrapper::before {
  width: 100%;
  height: 100%;  
  content: '';
  position: absolute;
}

.wrapper::before {
  background-color: red;
  mix-blend-mode: darken;
}


.wrapper::after {
  background-color: blue;
  mix-blend-mode: lighten;
}

.wrapper h1 {
  color: white;
  position: absolute;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 5.5vw;
  letter-spacing: 1em;
  text-align: center;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

Pada kode CSS3 dengan properties background-image: url(nama gambar) silahkan isikan dengan gambar yang telah disiapkan tadi. Setelah itu silahkan simpan filenya kemudian buka pada browser masing-masing dan lihat hasulnya. Maka akan tampil background gambar seperti gambar dibawah ini.

Cara Membuat Efek Background Gambar dengan Warna

Bagaimana, bagus buka kombinasi background gambar yang telah kita buat ? Baiklah cukup sekian tutorial sederhana mengenai bagaimana cara membuat efek background gambar dengan warna, semoga bermanfaat dan selamat mencoba.

Artikel, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More