Экран загрузки загружается высоко, он должен находиться под разделом меню страницы, чтобы он выглядел более реалистичным c, и как мне сделать изображение отображаемым одновременно с текстом, вызывающим изображение после загрузки всегда появляется первый 
HTML
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/CSS" href="dropdownmenu.css">
<link rel="stylesheet" type="text/CSS" href="rainbowheading.css">
<link rel="stylesheet" type="text/CSS" href="loadingcss.css">
<script src="loading.js"></script>
<title> North Macedonia </title>
<div class="container">
<h1 class="rainbow"> The pearl of the Balkans: Macedonia </h1>
<div class="navbar">
<a href="index.html">Home</a>
<a href="#news">Macedonian Dispora</a>
<a href="cities.html">Cities</a>
<div class="dropdown">
<button class="dropbtn">History
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Ancient History</a>
<a href="#">Ottoman Period</a>
<a href="#">Yugoslav Period</a>
<a href="#">Modern History</a>
</div>
</div>
</div>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Welcome to my website about Macedonia</h2>
<p>x</p>
</div>
<div style="display:none;" id="MyDi" class="animate-bottom">
<img src="./images/ohridindex.jpg" class="center">
</body>
CSS (для загрузки) Это основной CSS документ
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
#myDi {
display: Float;
text-align: center;
}
Javascript:
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
document.getElementById("myDi").style.display = "block";
}