"Responsive 404 Error with full page background image"
Bootstrap 3.0.0 Snippet by vishal1903

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>404 Error</title> <!--Include Bootstrap.css and bootstrap.min.css here--> </head> <body > <div class="background"> <div class="err"> <h2 style="text-align: center;"> Error 404. Oops The page you are looking for <b>Doesn't Exist</b></h2> </div> </div> </body> </html>
div.background { background: url(http://oswintechnologies.com/error/404.jpg) ; border: 1px solid white; background-size: cover; background-repeat: no-repeat; height: 100%; width: 100%; margin : auto; padding: 120px; } /* Below piece of code makes the highlitened box*/ div.err { margin: 100px; background-color: #ffffff;/* Used for colouring the transition box*/ border: 1px solid white; opacity: 0.6;/*Used to specify opacity*/ padding-top: 50px; padding-bottom: 50px } div.err p { margin: 2%; font-weight: bold; color: #000000; padding: 90px; }

Related: See More

Questions / Comments: