Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Text Block Over Image</title> <style> .box{ position: relative; display: inline-block; /* Make the width of box same as image */ } .box .text{ position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; text-align: center; top: 40%; /* Adjust this value to move the positioned div up and down */ background: rgba(0, 0, 0, 0.8); font-family: Arial,sans-serif; color: #fff; width: 60%; /* Set the width of the positioned div */ } </style> </head> <body> <div class="box"> <img src="/examples/images/kites.jpg" alt="Flying Kites"> <div class="text"> <h1>Flying Kites</h1> </div> </div> </body> </html>
