Cara Menampilkan Teks di Atas Gambar

Apakah ada yang sudah tau bagaimana cara membuatnya, jika sudah ada mari kita bantu yang belum tau, hehe oke langsung saja kali ini kita akan belajar cara menampilkan teks di atas gambar, hayo menggunakan apa, ya betul sekali kita akan membutuhkan bantuan CSS ya teman-teman, dengan bantuan CSS yaitu property posistion relative dan position absolute, dengan property itu kita akan bisa membuat teks di atas gambar ya teman-teman. oke bagaimana cara menampilkan teks di atas gambar, simak terus ya teman-teman.

Seperti yang tulis di atas cara menampilkan teks di atas gambar butuh position relative dan position absolute ya teman-teman, disini saya tidak akan membahas detial pengertian position relative dan position absolute, karena disini saya akan membahas langsung bagaimana cara menampilkan teks di atas gambar secara langsung.

Dan perlu teman-teman perhatikan ketika kita menggunakan absolute kita juga butuh property lain yaitu left dan top, karena jika kita tidak memberi left dan top teks tersebut mau di posisikan sebelah mana begitu ya teman-teman. Lalu apakah harus left dan top ya jelas tidak ya teman-teman, teman-teman juga bisa menggunakan right dan bottom juga bisa. Oke langsung, saja disini saya mempunyai gambar seperti ini ya teman-teman:

teman-teman jika mau sama bisa ambil saja gambar seperti di atas, jika sudah kita masuk dalam contoh pembuatannya.

<!DOCTYPE html>
<html>
<head>
	<title>Cara Menampilkan teks di atas gambar </title>
	<style-e- type="text/css">
	body{
		background-color: #666;
	}
		.container{
			width: 800px;
			margin: auto;
		}
		.pembungkus{
			position: relative;
		}
		img {
    	border: 5px dotted aqua;
		}
		h1{
			color: white;
		}
		h2{
			position: absolute;
			left: 40px;
			top: 120px;
			color: red;
		}
		h3{
			position: absolute;
			left: 40px;
			top: 150px;
			color: yellow;
		}
		h4{
			position: absolute;
			left: 40px;
			top: 170px;
			color: magenta;
		}
	</style-e->
</head>
<body>
<div class="container">
<h1>Cara Menampilkan teks di atas gambar</h1>
	<div class="pembungkus">
		<img src="september/belajar-html-itu-mudah.jpg">
		<h2>itu asik loh</h2>
		<h3>coba saja</h3>
		<h4>kalau tidak percaya ya sudah</h4>
	</div>
</div>
</body>
</html>

Tolong untuk kode di atas teman-teman hilangkan -e- yang terdapat pada tag <style> ya teman-teman karena jika saya tidak beri seperti itu atau saya membuat langsung tag <style> akan acak-acakan hasilnya. Bagimana hasilnya:

Sebelum di Style:

Sesudah di Style:

Bagimana teman-teman sangat menarik ya untuk di coba saya rasa cukup sekian dulu belajar kita tentang cara menampilkan teks di atas gambar, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.