紧急：如何实现背景图片自适应分辨率和IE窗口的调整_html/css_WEB-ITnose

各位高手，请教一下，我这里有一个jsp的登录页面。页面上除了输入框和按钮外，就是背景图片。其中的输入框的位置都用的是相对位置。但IE或分辨率调整后，仍会发生输入框和背景图错位的情况。请教一下大家，如何才能让背景图片也随IE和分辨率的变化而变化呢？？
请各位高手不吝赐教！！！！页面代码如下：
login.jsp：



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 + "/";
%>




">
系统登录















function processKey(event){
if(event.keyCode==13){
login();
}
}

function login(){
var saveFlag = true;

var regArray = new Array();
var errorMsgArray = new Array();
regArray.push(emptyReg);//empty
errorMsgArray.push("用户名不能为空 ");
regArray.push(/^[\w*\W*]{1,16}$/);//length
errorMsgArray.push("最大长度为16");
regArray.push(/^\w{1,16}$/);//character
errorMsgArray.push("只能输入字符 0-9 a-z A-Z _");
var temp = checkText("userName",regArray,errorMsgArray);
if(saveFlag==true) saveFlag = temp;


regArray = new Array();
errorMsgArray = new Array();
regArray.push(emptyReg);//empty
errorMsgArray.push("密码不能为空");
regArray.push(/^[\w*\W*]{1,16}$/);//length
errorMsgArray.push("最大长度为16");
regArray.push(/^\w{1,16}$/);//character
errorMsgArray.push("只能输入字符 0-9 a-z A-Z _");
temp = checkText("password",regArray,errorMsgArray);
if(saveFlag==true) saveFlag = temp;

if(saveFlag){
document.forms[0].submit();
}
}






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

.loginHeader{
/* background-image:url(https://img.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 。然后 单独在这个层里面建立一个层

查看更多关于紧急：如何实现背景图片自适应分辨率和IE窗口的调整_html/css_WEB-ITnose的详细内容...