Pengenalan Code HTML Background Image Teks . Hai ! Tutorial lalu kita sudah mempelajari tentang Pengenalan Code HTML Border Solid , jika anda ingin lebih jelas mengenal HTML anda bisa mengunjungi halaman berikut : https://www.dicloud.id/tutorial/categories/perkenalan-html , disini kita akan mempelajari tentang Pengenalan Code HTML Background Image Teks , berikut penjelasannya :
Pengenalan Code HTML Background Image Teks
disini kita akan mempelajari tentang Pengenalan Code HTML Background Image Teks , berikut penjelasannya :
Code HTML Background Image Teks
Disini saya akan memberikan contoh code HTML untuk menginputkan sebuah Background Image Teks ke dalam HTML , berikut contohnya :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <style type="text/css"> .bg { background-color: #28e9ed; color: white; padding: 10px; text-align: justify; } .gd { border: 2px solid; border-color: #28e9ed; padding: 100px; color: #ffffff; background-image: url(text.jpg); } .btn { background-color: #292cc6; padding: 10px; color: #ffffff; border: 14px; size: 13px; } .cmark{ background-color: #292cc6; } </style> <title>Test</title> </head> <body> <h3><i class="bg">What is Lorem Ipsum?</i></h3> <blockquote class="gd"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1></blockquote> </body> </html> |
Dan akan menampilkan hasil seperti gambar dibawah ini :
Disini kita menggunakan elemen sama yaitu class dan CSS , hanya saja kita menambahkan beberapa code baru seperti background-image : url(); , ini digunakan untuk menambahkan background image di mana saja mau di teks , di navbar , bingkai atau pun di web .
Kesimpulan
Disini jika anda ingin menambahkan sebuah background image anda bisa mengunakan code background-image: url();
Sekian terima kasih.
Technical Support in dicloud.id