Hi everyone,
I'm new to all of this so please forgive me if this is basic.
I'm trying to design a simple landing page for my photography website, that is based around an image with the text for links to mailto and tumblr already on it.
I have figured out how to add links etc already...
BUT...
I would like the image to resize with browser resize.
I have managed to get the image to resize, but now the transparent boxes for links stay in the same place.

Please help.
Thanks


Here is my html and css style sheet.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pete Prokopiw Photography</title>
<link href="style.css" rel="stylesheet" type="text/css" /><style type="text/css">
</style>



<div id="wrapper">
	<a href="linkhere"></a>
</div>


	
</html>
Code:
body {
	padding: 0;
	margin: 0;
	background-size: 100%;
	background-color: #000;
	background-image:url(web5trans.gif)
	background-position: 0px -225px;


	}

#wrapper {
	background-image: url(web5.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 1446px;
	background-position: 0px -225px;
	background-size: 100%;
	position: absolute;
}

a {
	display: block;
	background-color: #30C;
	background-size:100%;
	background-image:url(web5trans.gif);
	width:100%;
	height: 100px;
	top: 840px;
	left: 79px;
	position:fixed;
}