CodingForums.com - CSS sprites and links out of screen

I am a total newbie to CSS - am just an iphone developer, and I want to put a home page together to promote my apps, basically just one background image with links to the app store, facebook, and twitter.

I received from my designer the image (1400x776) that contains all the UI elements that I need (facebook and twitter icons, etc.). Since I am very much not into slicing this image, I read that using CSS sprites may be a good option. I used the following code to "mask" the icons so I could attach links to them and make them "clickable" but once I checked on a smaller screen, while I did see the full image, the "link" were way outside the screen (as if not "attached" to the UI elements anymore).

My index.html:

<head>
<title>Delengo Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">

#skyline {
background: url(delengo.jpg);
background-repeat:no-repeat;
background-position: top center;
width: 100%;
height: 100%;
margin: -10px;
padding: 0px;
min-height: 800px;
}

#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 1295px; top: 500px; width: 30px; height: 77px;}

</style>
</head>

<body>
<ul id="skyline">
<li id="panel1b"><a href="http://twitter.com/#!/delengo"></a></li>
</ul>
</body>
</html>

What is the best way to fix that, and is this the right way to utilize CSS sprints anyway?

Thanks for any help.