Cara menggunakan cover image css

Hallo sobat program, bertemu kembali dengan saya Rizal. Pada kesempatan kali ini saya akan memberikan tips serta tutorial tentang Cara Membuat Background Images Color Overlay dengan HTML CSS. Disini kita akan bermain sedikit dengan warna-warna hehe.

Oke, untuk pengertian color overlay itu sendiri adalah untuk melapisi atau menutupi objek dengan warna tertentu. Sudah kebayang belom ? jadi misalnya seperti ini karena kita disini menggunakan background images berarti nantinya sebuah gambar akan kita lapisi dengan warna bebas.

Cara Membuat Background Images Color Overlay dengan HTML CSS

Untuk lebih jelasnya mari kita coba ya teman-teman, silahkan jalankan/run text-editornya dan siapkan sebuah gambar untuk nanti kita jadikan objek dan kita lapisi dengan color overlay. Jika sudah teman-teman bisa langsung ketik kode HTML nya seperti pada contoh dibawah ini :

Setelah kita membuat sebuah div html dengan class overlay, maka langkah selanjutnya kita masukan gambar serta effect color overlay di style CSS seperti pada contoh dibawah ini :

<style>

body {margin:0;padding:0;}

.overlay {

width:100%;height: 850px;

background:

linear-gradient(

rgba(13,110,255,0.7),

rgba(255,212, 14,0.7)

url(pemandangan.jpg)no-repeat;

background-size:cover;

}

</style>

Pada kode CSS diatas teman-teman sesuaikan dengan nama file gambar teman-teman dan disitu saya menggunakan linear-gradient, jadi linear-gradient ini saya gunakan untuk kombinasi warna jadi tidak hanya 1 warna saja.

Cara Membuat Background Images Color Overlay dengan HTML CSS

Oke untuk hasil keseluruhan dari kedua kode diatas maka akan menjadi seperti pada contoh dibawah ini :

<html>

<head>

<title>ImagesBackgroundColorOverlay</title>

<style>

body {margin:0;padding:0;}

.overlay {

width:100%;height:850px;

background:

linear-gradient(

rgba(13,110,255,0.7),

rgba(255,212,14, 0.7)

url(pemandangan.jpg)no-repeat;

background-size:cover;

}

</style>

</head>

<body>

</body>

</html>

Jika sudah seperti diatas, maka langkah selanjutnya silahkan dijalankan/run di browser yang teman-teman gunakan jika benar maka hasilnya akan menjadi seperti pada gambar dibawah ini :

Keliatan indah kan teman-teman, jadi saya perpadukan warna biru untuk yg atas dan orange untuk warna dasar bawah hehe.jadi seperti inilah contoh sederhana tentang Cara Membuat Background Images Color Overlay dengan HTML CSS Dan silahkan explore lagi ya teman-teman.

Oke kalau begitu cukup sampai disini pembahasan kali ini tentang Cara Membuat Background Images Color Overlay dengan HTML CSS semoga dapat bermanfaat.

Terimakasih