Cara Membuat Efek Background Gambar dengan Warna

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.

29 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat