Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial; font-size: 17px; } .container { position: relative; max-width: 800px; margin: 0 auto; } .container img {vertical-align: middle;} .container .content { position: absolute; bottom: 0; background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */ color: #f1f1f1; width: 100%; padding: 20px; } </style> </head> <body> <h2>Responsive Image with Transparent Text</h2> <div class="container"> <img src="/w3images/notebook.jpg" alt="Notebook" style="width:100%;"> <div class="content"> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.</p> </div> </div> </body> </html>
