Cara Menambahkan Background Gambar pada Teks

Cara Menambahkan Background Gambar pada Teks - Saat ini CSS telah memberikan kita kemudahan dalam mengatur layout, membuat efek atau pun animasi sederhana dengan properti - properti yang disediakan CSS. Misalnya saja, dengan CSS kita bisa membuat efek hover, menambahkan gambar, mengubah ukuran elemen, mengubah font dan lain sebagainya. Nah, pada kesempatan kali ini saya akan berbagi sedikit tutorial CSS yang mudah - mudah bisa membantu kalian yang sedang belajar ataupun menjadi referensi. Tutorial berikut tentang bagaimana Cara Menambahkan Background Gambar pada Teks. Simak langkah - langkah nya berikut ini.

Kode HTML

Baik langsung saja kita mulai praktek nya, namun sebelumnya kalian wajib menyiapkan satu gambar untuk bahan yang akan dijadikan background pada teks. 
Nah, langkah pertama tentu kita akan buat elemen teks nya terlebih dahulu. Silahkan kalian bisa ketikan kode HTML seperti berikut. 

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

Kode CSS

Setelah membuat elemen teks nya seperti diatas, langkah selanjutnya adalah kita akan menambahkan gambar pada elemen teks sebagai background nya. Cara silahkan kalian ketikan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Pacifico|Righteous&display=swap');
.wrapper {
     width: 50%;
     margin: 0 auto;
     text-align: center;
     background: url('berries.jpg') 0 0;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}    
h1 {font-size: 12em; font-family: 'Righteous', cursive;}
h2 {
    font-size: 8em;
    margin-top: -200px;
    font-family: 'Pacifico', cursive;
}

Setelah semua kode HTML dan CSS telah diketikan semua, langkah selanjutnya tinggal kalian simpan filenya kemudian kalian bisa melihat hasil akhir pada browser masing - masing.

Baik, itu tadi tutorial bagaiamna Cara Menambahkan Background Gambar pada Teks, cukup mudah bukan cara nya ? semoga tutorial ini bisa bermanfaat. Selamat mencoba dan sampai jumpa di tutorial selanjutnya :)

25 Juni 2019

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat