Так что я имею изменяющие изображения (не фоновые изображения) на своем сайте (они меняются каждые 6 секунд), и я хочу, чтобы он покрывал весь монитор (кроме заголовка), пока вы не прокрутите вниз. Я не знаю, как это сделать, однако. Я пытался с позиции: исправлено, но это вызвало много проблем. Кто-нибудь знает, как я мог бы сделать это на моем сайте? сайт www.mh-rp.com. См. Соответствующий код и изображение ниже:
введите описание изображения здесь
<main>
<div class="image_container" style="max-width:100%">
<img class="mySlides" src="/images/1.png" style="width:100%">
<img class="mySlides" src="/images/2.png" style="width:100%">
<img class="mySlides" src="/images/3.png" style="width:100%">
<img class="mySlides" src="/images/4.png" style="width:100%">
<img class="mySlides" src="/images/5.png" style="width:100%">
<img class="mySlides" src="/images/6.png" style="width:100%">
<img class="mySlides" src="/images/7.png" style="width:100%">
<img class="mySlides" src="/images/8.png" style="width:100%">
<img class="mySlides" src="/images/9.png" style="width:100%">
<img class="mySlides" src="/images/10.png" style="width:100%">
<img class="mySlides" src="/images/11.png" style="width:100%">
<div class="maintext">Mulholland Roleplay</div>
<img class="ipimage" src="/images/sa-mp.png">
<span class="mainip">57.80.79.165:1050</span>
<a class="mainbutton" href="https://www.forum.mh-rp.com/wiki/game-server/">Play Now</a>
</div>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 6000); // Change image every 2 seconds
}
body
{
overflow-x: hidden;
}
.image_container
{
position:relative;
}
.maintext
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 72px;
}
.mainip
{
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 32px;
}
.ipimage
{
position: absolute;
top: 53%;
left: 43.2%;
width: 32px;
}
.mainbutton
{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 32px;
border-style: solid;
border-width: 1px;
border-color: white;
transition: border-width 0.3s;
padding: 5px 5px 5px 5px;
}
.mainbutton:hover
{
border-width: 3px;
padding: 5px 5px 5px 5px;
}
@media (max-width: 1200px)
{
.maintext
{
font-size: 36px;
}
.mainbutton
{
font-size: 16px;
}
}
@media (max-width: 800px)
{
.maintext
{
font-size: 18px;
}
.mainbutton
{
font-size: 8px;
}
}