CSS butun oynaga teng orqa rasm

Brauzer oynasidaka bo'yga ega bo'lgan div kerakmi? Unda quyidagacha yozing.

<div style="height: 100vh; background-color: orangered;">
</div>

100vh - brauzer oyna bo'yining 100 foizi degani. 40vh - 40 foiz. 67vh - 67 foiz.

Aslida 100vh brauzer oynaning emas, balki sahifa ko'rsatiladigan maydon bo'yining 100 foizi, lekin gapni soddalashtirish uchun brauzer oynasi deyaveramiz.

Shu https://placebear.com/2000/1500 orqa rasmni qo'shamiz.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
">
</div>

Orqa rasmni kichiklashtiramiz.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
    background-size: cover;">
</div>

Orqa rasm chapga ketib qolibdi. Uni markazlashtiramiz.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
    background-size: cover;
    background-position: center;">
</div>

Endi divimizga h1 qo'shamiz.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
    background-size: cover;
    background-position: center;
">
    <h1 style="color: blue; font-family: Arial">Ilm</h1></div>

Ilm

Endi h1 dagi yozuvni yotiq o'q bo'yicha markazlashtirib ko'ramiz.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
    background-size: cover;
    background-position: center;
    padding-top: 50vh;
">
    <h1 style="
        color: blue;
        font-family: Arial;
        text-align: center;    ">Ilm</h1>
</div>

Ilm

Endi h1 dagi yozuvni tik o'q bo'yicha markazlashtirib ko'ramiz.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
    background-size: cover;
    background-position: center;
">
    <h1 style="
        color: blue;
        font-family: Arial;
        text-align: center;
        margin-top: 50vh;    ">Ilm</h1>
</div>

Ilm

Muammo chiqib qo'ldi. Bu muammoning nomi Hoshiya qulashidir, uni oldingi darslardan birida o'tgan edik. Uni to'g'rilash uchun quyidagicha yozamiz.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
    background-size: cover;
    background-position: center;
    overflow: hidden;">
    <h1 style="
        color: blue;
        font-family: Arial;
        text-align: center;
        margin-top: 50vh;
    ">Ilm</h1>
</div>

Ilm

Ko'proq yozuvlarni qo'ysak bo'ladi.

<div style="
    height: 100vh;
    background-image: url(https://placebear.com/2000/1500);
    background-size: cover;
    background-position: center;
    overflow: hidden;
">
    <div>
        <h1 style="
            color: blue;
            font-family: Arial;
            text-align: center;
            margin-top: 50vh;
        ">Ilm</h1>
        <p style="
            color: pink;
            font-family: Arial;
            text-align: center;
        ">
            Ezgulik va mehr
        </p>
    </div>
</div>

Ilm

Ezgulik va mehr