There is a background image above which a div is placed having border and some textbox.
Now there is a modalpopup of sign in which should appear at the top of frame on click.
But it is somehow appearing under the div. I don't understand why.
<style>
body, html
{
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
*
{
box-sizing: border-box;
}
.bg-image
{
/* The image used */
background-image: url(./Images/Stadium.jpg); /* Add the blur effect */ /*filter: blur(4px);
-webkit-filter: blur(4px); /* Full height */
height: 400px; /* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text
{
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.8); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
padding: 20px;
text-align: center;
}
</style>
<div class="bg-image">
</div>
<div class="bg-text">
<h2 style="font-variant: normal; font-family: Times New Roman; font-size: 1em; color: Black;
margin: auto;">
Find a Sports Coach</h2>
<asp:TextBox ID="txtSport" Style="margin-top: 100px;" runat="server" Font-Size="1em"
Font-Bold="false" onblur="Javascript:FormatSport();"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Style="margin-left: 15px; text-align: left;"
Text="Find" ValidationGroup="searchJob" OnClick="btnSearch_Click" />
<asp:TextBox ID="txtLoc" runat="server" Font-Size="1em" Font-Bold="false" placeholder="Bangalore"
ToolTip="Locations" onblur="Javascript:FormatLocation();"></asp:TextBox>
</div>
<div>
<asp:LinkButton ID="lnkSignIn" runat="server" Text="Sign in" ForeColor="Black" Style="float: right;"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp2" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panel2"
TargetControlID="lnkSignIn" CancelControlID="btnSignInCancel" DropShadow="true"
BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
</div>
