Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } h2{ font-size:30px; } .image { background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .text { color: #eeeeee; font-weight: bold; border: 3px solid #cccccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 20px; text-align: center; } </style> </head> <body> <div class="image"></div> <div class="text"> <h1>W3DOCS</h1> <h2>Blurred Background Image</h2> <p>Snippet</p> </div> </body> </html>