Urgent: How to realize adaptive resolution of background images and adjustment of IE window_html/css_WEB-ITnose

Dear experts, please give me some advice. I have a jsp login page here. In addition to the input boxes and buttons on the page, there is a background image. The positions of the input boxes are all relative positions. However, after IE or resolution adjustment, the input box and background image will still be misaligned. I would like to ask everyone, how can I make the background image change with the changes of IE and resolution? ?
Please give me some advice from all the experts! ! ! ! The page code is as follows:
login.jsp:
<%@ page contentType="text/html;charset=gb2312" language="java" import="java.util.*,com.iproject.examsys. web.to.*" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
if(request.getSession (true).getAttribute(UserSessionInfo.USER_SESSION)!=null){
response.sendRedirect("examination/index");
}
response.setHeader("Pragma", "No-cache") ;
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>















< ;body class="loginBgGround">

width="100%" height="100%">


                                                                                         td colspan="4" width="65.1%" >
                                               ;/td>
                                                               d colspan="2" width="27%">
                                                                   
                
            
                
                                    
                                               
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                 
                
                
                    
                    
                    
                    
                    
                    
                    
                 
            
                 
                    
                    
                    
                    
                    
                    
                    
                    
                                 
                
                
                    
                    
                    
                    
                    
                    
                    
                   
                
                
                    
                           
            

<script> <br> function processKey(event){ <br> if(event.keyCode==13){ <br> login(); <br> } <br> } <br> <br> function login(){ <br>     var saveFlag = true; <br> <br>     var regArray = new Array(); <br> var errorMsgArray = new Array(); <br> regArray.push(emptyReg);//empty <br> errorMsgArray.push("用户名不能为空 "); <br> regArray.push(/^[\w*\W*]{1,16}$/);//length <br> errorMsgArray.push("最大长度为16"); <br> regArray.push(/^\w{1,16}$/);//character <br> errorMsgArray.push("只能输入字符  0-9 a-z A-Z _"); <br> var temp = checkText("userName",regArray,errorMsgArray); <br> if(saveFlag==true) saveFlag = temp; <br>     <br> <br> regArray = new Array(); <br> errorMsgArray = new Array(); <br> regArray.push(emptyReg);//empty <br> errorMsgArray.push("密码不能为空"); <br> regArray.push(/^[\w*\W*]{1,16}$/);//length <br> errorMsgArray.push("最大长度为16"); <br> regArray.push(/^\w{1,16}$/);//character <br> errorMsgArray.push("只能输入字符  0-9 a-z A-Z _"); <br> temp = checkText("password",regArray,errorMsgArray); <br> if(saveFlag==true) saveFlag = temp; <br> <br> if(saveFlag){ <br> document.forms[0].submit(); <br> } <br> } <br> </script>





对一个的style.css如下：
.loginBgGround{
background-repeat:no-repeat;
background-position:center;
background-image:url(../images/bg.jpg); 
background-attachment:fixed;
width:100%;
height:100%;
}

.loginHeader{
/* background-image:url(../images/bg.jpg);  */
background-color:blue

}

.labelStyle{
font-weight:bold;
font-size:15px;
color:#333333;
}

.inputTextStyle{
/* background-image:url(../images/TextBox.jpg);  */
}


.warningFont{
font-size:12px;
color:#ff0000;
font-weight:bold;
}


.area {
background-image:url(../images/AREA.gif);
height:19px;
width:129px;
border:0px;
font-family:Tahoma;
font-size:12px;
color:#333333;
padding-left:3px;
}

.button{
display: block;
cursor:hand;
width:101px;
　　 height:92px;

  /*background:url(../images/LoginButton.jpg) no-repeat;*/
}



.button1,.button2{
float:left;
　　 width:196px;
　　 height:40px;
　　 position:relative;
  /*background:url(../images/button.jpg) no-repeat;*/
}

.button1{
display: block;
padding: 5px 10px 5px 11px;
cursor:hand;
font-size :22px;
  background-position:50% 20%;
}
.button2{
display: block;
padding: 5px 10px 5px 11px;

cursor:hand;
font-size :22px;
  background-position:50% 81%;
}

回复讨论(解决方案)

背景图要使用百分比，必须使用CSS3，ie9之前的浏览器不支持的。
你不要采用相对定位的方法，直接设置固定的宽度和高度实现

有一个 不是办法的办法，如果不考虑根据分辨率自适应之后的拉伸问题的话可以这么写先给 大外层 一个 position:relative 。然后 单独在这个层里面建立一个层 

The corresponding css is written like this .bgimg{width:100%;height100%;position:absolute;z-index:xxx;} .bgimg img{width:100%;height:100%;}

In fact The principle is to put this picture at the bottom of the page to fool the visual effect into thinking it is a background. Then stretch this layer. I think stretching a layer is much simpler than stretching a background.

Are you upstairs? After I followed your method, the positions of the page and the input box are now relatively static. But a new problem arises, that is, the page and input appear on the right side of the entire IE. The originally set width = 100%, but in fact the background does appear at IE50%, and then goes to the right to IE150%. .
The code is as follows, please, please, and also all the experts can help me take a look and give me some advice, thank you!
login.jsp code is as follows:

<%@ page contentType="text/html;charset=gb2312" language="java" import="java.util.*,com.iproject.examsys .web.to.*" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
if(request. getSession(true).getAttribute(UserSessionInfo.USER_SESSION)!=null){
response.sendRedirect("examination/index");
}
response.setHeader("Pragma", "No-cache" );
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>

="center" width="100%" height="100%" class="divTB">
                                                                         "100%">
1.875%">
                                                                  65.1%" >
                                                    lt;/td>
                    
                                                                   
                
            
                
                                    
                                               
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                 
                
                
                    
                    
                    
                    
                    
                    
                    
                 
            
                 
                    
                    
                    
                    
                    
                    
                    
                    
                                 
                
                
                    
                    
                    
                    
                    
                    
                    
                   
                
                
                    
                           
            

The css code is as follows:

.loginBgGround{
/*background-repeat:no-repeat;*/
background-position:center;
/*background-image:url(../images/bg.jpg); */
background-attachment:fixed;
width:100%;
height:100%;
position: absolute;
margin:0;
}

. divImg{
width:100%;
height:100%;
position:absolute;
z-index:-1;
margin: 0;
}

.divTB{
width:100%;
height:100%;
position:absolute;
z-index:1;
margin: 0;
}

I did it myself! ! Haha, I broke out in a sweat! Although I got it done by myself in the end, I still have to thank you upstairs, your idea is very clever!

How did the poster solve the problem? Please give me some guidance