Question

如何让我的背景以position: absolute;作为我的几个div元素？我试图在不同的屏幕分辨率下使我的div元素和背景保持同步。下面是我迄今为止实施的小代码。

<!doctype html><head>

<title>Coming Soon! </title></head>



<style>

* { 

padding: 0px;
margin: 0px; 
}

#searchfold {
    background: url("../imgs/search_box.png") no-repeat scroll 0 0 transparent;
    height: 335px;
    margin-left: 173px;
    margin-top: 135px;
    width: 890px;
    position: absolute;

}


#bottomfoldbox {
    background: url("../imgs/bottom_foldbox.png") no-repeat scroll 0 0 transparent;
    height: 335px;
    margin-left: 173px;
    margin-top: 750px;
    width: 890px;
    position: absolute;
}

#searchfield {
    float: right;
    height: 50px;
    margin-right: 178px;
    margin-top: 250px;
    width: 296px;
}


</style>


</head>

<body style="background-image: url('http://mysite.com/wp/wp-content/uploads/2012/02/mysite_Homepage.gif'); background-repeat: no-repeat; background-position: center; height: 1055px; position: relative;">


<div id="searchfold">

<div id="searchfield">
<form name="input" action="html_form_action.asp" method="get">
<input type="text" name="user" style="height:40px; width:200px;"/>
<INPUT type="image" name="search" src="../imgs/search_btn.png" border="0" style=" float: right;
    margin-right: -130px;
    margin-top: -19px;}"></form>
</div>

</div>



</div>


<div id="bottomfoldbox">


</div>
</div>

</body>


</html>

Answer 1

我建议您使用媒体查询来正确处理不同的屏幕分辨率

背景图像保持与divs

1 个答案: