Although the page appears fine in normal view mode, an issue arises when the page size is reduced - the image within the body tag vanishes. Multiple attempts have been made to rectify this problem by altering the code, but unfortunately, none have proven successful.
<!DOCTYPE html5>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<link type="text/css" rel="stylesheet" href="style.css" />
<title> home
</title>
<style>
.wrapper {
background-color: #66aaee;
position:relative;
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 500%;}
<!--wrapper is the main div that contains all the content of the page -->
.header{
background-color: #66bbff;
width: 100%;
height: 21.5%;
margin-top: -8%;
position: fixed;
z-index: 2;}
<!-- navigation is a div inside the header and it contains all the menu -->
.navigation{
margin-left: 15%;
width: 500px;
float: none;}
.body {
background-color: black;
height: 95%;
margin-left: 10%;
margin-top:8%;
width: 80%;
}
.body img {margin-left: 10%;
margin-top: 7%;
width: inherit;
float: none;
overflow: hidden;}
.body_down {
height: 90%;
background-color:#44aacc;
font-size: 20px;
margin-top: 1%;
position: relative;
z-index: 1;}
<!--body_down is another div that contains some of the body content -->
.footer{
background-color:#ffffff;
font-size: 20px;
margin-top: 100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="navigation">
<img src="image/header.png" width="800px">
<nav>
<ul>
<li> <a href="#" style="text-decoration:none" target_="blank"> Home </a> </li>
<li> <a href="#" style="text-decoration:none">About </a> </li>
<li> <a href="#" style ="text-decoration:none"> About Research Buddies </a> </li>
<li> <a href="#" style="text-decoration:none">Products and services </a>
<ul>
<li> GRAPHIC DESIGN </li>
<li> CITATIONS </li>
<li> PRINTING </a> </li>
<li> PUBLISHING </li>
<li> PHOTO EDITING </li>
</ul>
</li>
<li> <a href="#" style="text-decoration:none"> Promotions </a> </li>
<li> <a href="#" style ="text-decoration:none"> FAQs </a> </li>
<li> <a href="#" style="text-decoration:none"> Contact us </a> </li>
</ul>
</nav>
</div>
</div>
<div class="body">
<img src="image/ww.jpg"/>
</div>
<div class="body_down">
body content continues here
</div>
<div class="footer">
the footer is here
</div>
</div>
</body>
</html>
During normal viewing, the page presents as expected. However, issues arise as the page's size decreases, causing the image within the body tag to disappear. Despite numerous attempts to fix this problem through code editing, a solution remains elusive.