Refreshing page changes the layout of UI - html

Question

I am new to web development. I am using asp.net. Below is the CSS I use in a .aspx file. When I open it in my phone the UI looks fine although the #background is a little bit longer than the whole page.
<style type="text/css">
#form1 {
position: absolute;
z-index: 1;
}
#background {
position: absolute;
width: 100%;
height: 180%;
z-index: 0;
}
#Image1{
position:relative;
width:100%;
height:100%;
}
</style>
When I click the button, the UI refreshes to make the #background to be the same size as the whole page but extends the size of #Image1. Why does the refresh of page do this? How to avoid it? Thanks.
<div align="center">
<asp:Button ID="Reserve" runat="server" Width="800px" Text="Reserve" Font-Size="45px" BackColor="OrangeRed" ForeColor="White" OnClick="Reserve_Click"/>
</div>

Answer 1

Solved. The problem is in the back-end code
Response.Write("<script>alert(....)").
After changing it into
Page page=this.Page;
if (!page.ClientScript.IsStartupScriptRegistered(page.GetType(), "alert"))
{
page.ClientScript.RegisterStartupScript(page.GetType(), "alert", "<script>alert(....)");
}
the css is ok. referred from https://blog.csdn.net/woshixuye/article/details/7217261