Be gentle, I usually just use themes and rarely modify HTML.
Homepage of Atahualpa
In order to achieve the style I'm aiming for I have created links by putting the text as part of the background image and then mapping clickable areas over the text in the image. The problem is that depending on how large the browser window is and what the monitor format is the clickable areas do not stay over the proper part of the image.
I'm sure I am missing something fundamental because I'm searching frantically and finding nothing related, suggesting that this is such a basic issue that no one has had to pose the question before. Probably, not knowing the lingo so well is not helping with my search either.
The page is very basic. With great thanks and without further ado:
http://www.guardiansofthewolves.com
<!DOCTYPE html>
<html>
<head>
<style>
p
{
white-space:normal;
}
</style>
</head>
<body>
<p>
<img class="alignnone size-full wp-image-22" alt="post back 1f" src="http://www.guardiansofthewolves.com/wp-content/uploads/2013/04/post-back-1f.jpg" usemap="#map" width="1992" height="1059" />
<map name="Map"> <area coords="70,510,290,545" shape="rect" href="http://www.guardiansofthewolves.com/?page_id=34" /> <area coords="70,567,264,600" shape="rect" href="http://www.guardiansofthewolves.com" /> <area coords="70,622,335,655" shape="rect" href="http://www.guardiansofthewolves.com/?page_id=24" /> <area coords="70,677,202,710" shape="rect" href="http://www.guardiansofthewolves.com" /> </map>
</p>
</body>
</html>