Hi there,

I am creating a website for a festival:http://arcan3.co.uk/coldharbour

The background consists of a large photo. I wanted this to fit the whole browser, whatever the size eg. on small laptop screens to big desktops to phone browsers etc.
My friend gave me the following code which successfully made the photo resize to the browser until a min height and width:
HTML Code:
#ch_main{
	width: 100%;
	min-height:1000px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(http://arcan3.co.uk/images/coldharbour/finishedbackalt.png) #000000 no-repeat top ;
	background-size:100%;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/finishedbackalt.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/finishedbackalt.png', sizingMethod='scale')";
min-width:1000px;
min-height:1000px;
}
As I said, this resizes the photo just fine. However, on the page currently (there is still much to be developed!!), there is a news feed, and a menu bar at the bottom which are have to be in very accurate positions. (The news feed bar should be at the top of the hay bails in the background, and the menu bar just at the bottom of the photo). When one for example makes the browser smaller, this all become out of line.

Would anyone be able to help me in making these elements lock into certain parts of the photo, no matter of the resizing?

Here some of the other coding you may find helpful:
Menu Bar:
HTML Code:
.strawnav {
	white-space:nowrap;
	float:left; 
	width:100%; 
	height:100px;
	border:none; 
	margin-top:0px; 
	background:url(http://arcan3.co.uk/images/coldharbour/strawmenurepeat.png) 120px top repeat-x; 
	text-transform: smallcaps;
	word-spacing:80px;
	line-height:42px;
	font-size:3em;
	font-weight:bold;
	padding: 7px 0px 0px 0px;
	text-align: center;
	
	
}
News Feed:
HTML Code:
.ch_main_feed {
	background: url(http://arcan3.co.uk/images/coldharbour/strawnewsnewsized.png) top no-repeat;

	width: 300px;
	height: 141px;
	}
Thanks!