Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Image with text block</title> <style> .block { margin: 10px; width: 230px; height: 150px; float: left; background: url(https://w3docs.com/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png); background-size: cover; position: relative; } h2 { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.75); padding: 4px 8px; color: white; margin: 0; font: 14px Sans-Serif; } .light h2 { background: rgba(255, 255, 255, 0.75); color: black; } </style> </head> <body> <div class="block"> <h2>Flying Birds</h2> </div> <div class="block light"> <h2>Flying Birds</h2> </div> </body> </html>