problem with resolution in background image

**sanduwa** · 09-03-2010, 03:34 PM

Hi all,
I have created a web page and set a background for it. but when resolution is change, the image is moving round.

please visit here (for convenient i put a table instead of the web page) http://www.sanduwa.comule.com/test/ (the correct position will give when resolution is 1366x768)

i want to keep the background image at constant position(according to the page)
here the code,

index.html (for convenient i put a table instead of the web page )

Code:

<html>
<head>
    <title>Test</title>
	
	<link rel="stylesheet" href="css/styleback.css" type="text/css" charset="utf-8"/>

</head>
	<body>
        	<div class="palmtrees"></div>
        	<div class="powerline"></div>
        	<div class="city"></div>
			
			<div>
				<table width="787" height="727" border="2" align="center" bordercolor="#000000" bgcolor="#FF0000">
 					<tr><td width="777" height="89"></td></tr>
  					<tr><td height="465">&nbsp;</td></tr>
  					<tr><td height="161"></td></tr>
				</table>
			<div>
	</body>
</html>

styleback.css,

Code:

body{
    margin:0px;
    padding:0px;
    background:#CFB616 url(../images/bg.png) repeat-x 0px -80px;
}

.palmtrees{
    position:absolute;
    bottom:0px;
    right:10px;
    width:304px;
    height:352px;
    background:transparent url(../images/shadow_palmtrees.png) no-repeat 0px 0px;
}

.powerline{
    position:absolute;
    bottom:-5px;
    left:0px;
    width:556px;
    height:264px;
    background:transparent url(../images/shadow_powerlines.png) no-repeat 0px 0px;
}

.city{
    position:absolute;
    bottom:0px;
    left:10px;
    width:100%;
    height:74px;
    background:transparent url(../images/shadow_bg.png) repeat-x -11px 0px;
}

please help me to solve this problem.
thank you very much

.

Thread: problem with resolution in background image

Thread Tools

Search Thread

problem with resolution in background image

Bookmarks

Bookmarks

Posting Permissions