How can I get my background to act position: absolute; as my few div elements on top of it? I’m trying to make it so at different screen resolutions my div elements and background stay in sync. Below is the small code I have implemented thus far.
<!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>
I recomend you to use media queries to treat different screen resolution properly