Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> h1 { text-align: center; } .overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .image { width: 500px; height: 330px; margin-bottom: 20px; background-image: url('https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-position: center; background-size: cover; background-repeat: no-repeat; } </style> </head> <body> <h1>Example</h1> <h2>Original image</h2> <div class="image"></div> <h2>Overlay image</h2> <div class="image"> <div class="overlay"> </div> </div> </body> </html>