Изображение в теле должно охватывать всю высоту, пока вы не прокрутите - PullRequest
Новая
       17

Изображение в теле должно охватывать всю высоту, пока вы не прокрутите

0 голосов
/ 28 октября 2019

Так что я имею изменяющие изображения (не фоновые изображения) на своем сайте (они меняются каждые 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;
    }
    }
...