I am facing an issue with displaying a background image on a static web page. The height appears differently on various LCD screens. How can I ensure that the height adjusts to approximately 80% of the area? I have tried giving a percentage in the style for the height, but it did not work for me.
Here is a reference image:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bakheet Japan</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/full-width-pics.css" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<style>
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor: pointer;
font-size: 16px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: dimgrey;
color: white;
text-align: center;
}
header.py-5 {
width: 100%;
display: block;
width: auto;
height: 450px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand " href="#"><h3>Bakheet Japan</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!--<div class="buttons">-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link button" href="index.html">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link button"
href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link button"
href="Contactus.html">Contact</a>
</li>
</ul>
<!--</div>-->
</div>
</div>
</nav>
<header class="py-5 bg-image-full" style="background-
image:url('css/arid-
barren-daylight-813873.jpg');">
<img class="img-fluid d-block mx-auto" height="230" width="240"
src="css/41435f27-bfd3-452a-b442-f8c4ca429a55.png" alt="">
</header>
<div id="div1" class="container" style="height:150px;">
<h1>Welcome to Bakheet Japan</h1>
</div>
<div class="footer container">
<p class="m-0 text-center text-white">Copyright © Bakheet Japan
2018</p>
</div>
</body>
</html>