<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;
}
