Blazor Modal Popup Window moves whole background

Question

I added a Modal Popup Window in my blazor application. Its just in the Index.razor and it open Level1.razor. But when it pops up my whole background moves up.

this is in my Index.razor:

<img class="Button" src="./Images/Button2.png" alt="Fishing Boy" @onclick="@(()=>modal.Show<Level1>("Modal Popup Example"))">

this is what i added to my Level1.razor:

@page "/Level1"
@inject HttpClient Http

    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
    </table>

this is the css i added for my background, i didnt add it for my Level1.blazor.

body {
    background-image: url("../Images/level1.png");
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center center;
}

and this is before and after i click it.

and this is after the click:

Does someone know how i prevent this from happening? thanks in regards!

Answer 1

Could you please try to set a fix width and/or height to your body?

body {
    width: 100vw;
    height: 100vh;
    background-image: url("../Images/level1.png");
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center center;
}

In addition, what is the library you use for the popup?

Thanks